CSS中如何做到导航点击,滚动就滑动到对应的区域 例如导航上的产品，点击就滑动到当前页面的产品区域了。

html-css014

CSS中如何做到导航点击,滚动就滑动到对应的区域 例如导航上的产品，点击就滑动到当前页面的产品区域了。,第1张

比如我现在要滑动到此p标签区域，可先给p标签加上一个id，

导航处的a标签利用它的href属性，如<a href="#scroll"></a>

<p id="scroll"></p>

这个不是CSS能设定的。你要在不同的页面里分别设置导航条。或者你可以用一个函数来生成导航条，根据调用页面的不同，生成样式不同的导航条。

举个例子：例如php函数：

function getNav($page){

//储存你的导航栏信息

$nav_s = array("首页","公司简介","产品展示","客户案例","诚聘英才")

$nav_d = array("index.php","about.php","products.php","demo.php","xxx.php")

//通过循环输出导航

$html = '<ul>'

for(var $i=0$i<count($nav_s)$i++){

if($page==$i){

$html .= '<li><span class="这里是选中的CSS类名">' . $nav_s[$i] . '</span></li>'

}else{

$html .= '<li><a href="'. $nav_d[$i] .'" class="这里是普通的CSS类名">' . $nav_s[$i] . '</a></li>'

}

$html .= '</ul>'

return $html

}

}

然后在不同的页面里调用，

比如在index.php里应写为

$nav_html = getNav(0)

echo $nav_html

在公司简介页面about.php里应写为

$nav_html = getNav(1)

echo $nav_html

类推。。

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gbk" />

<title>滑动门</title>

<style>

<!--

* {

margin:0

padding:0

font-size:12px

}

body {

padding:30px

}

.tabsBox {

width:400px

margin:20px auto

}

.tabs {

height:20px

}

.tabs li {

width:80pxtext-align:center

padding-top:2px

line-height:18px

float:left

background-color:#ccc

margin-right:5px

list-style:none

position:relative

cursor:pointer

color:#333

}

.tabs li span {

display:none

}

.tabs .cur {

background-color:#f0f0f0

}

.tabs .cur span {

display:block

width:1px

height:1px

border:solid 8px

border-color:#f0f0f0 #fff #fff #fff

position:absolute

top:20px

left:32px

overflow:hidden

z-index:-1

}

.cons {

height:120px

padding:8px 12px

overflow:hidden

border:1px solid #f0f0f0

position:relative

z-index:1

}

.cons ul li {

list-style:none

line-height:20px

}

.hidden {

display:none

}

.block {

display:block

}

-->

</style>

</head>

<body>

<div class="tabsBox">

<ul id="Tabs" class="tabs">

<li class="cur">最新更新<span></span></li>

<li>推荐下载<span></span></li>

<li>下载排行<span></span></li>

<li>本月排行<span></span></li>

</ul>

<div id="TabsCon" class="cons">

<ul>

<li><a href="/soft/4764.shtml" target="_blank">基于JavaScript的气泡提示网页版</a></li>

<li><a href="/soft/8021.shtml" target="_blank">C#调用OFFICE组件生成Excel表格示例</a></li>

<li><a href="/soft/9011.shtml" target="_blank">iFrame 框架在多页面间相互传值的实例</a></li>

<li><a href="/soft/1658.shtml" target="_blank">高亮显示代码的在线编辑器ASP.NET版</a></li>

<li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li>

<li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银软件</a></li>

</ul>

<ul>

<li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银软件</a></li>

<li><a href="/soft/3855.shtml" target="_blank">VB 6.0 简体中文标准版</a></li>

<li><a href="/soft/8467.shtml" target="_blank">Delphi加密隐藏或还原Windows盘符驱动器</a></li>

<li><a href="/soft/5238.shtml" target="_blank">ImageVue 2.0 PHP+FLASH+XML高级相册</a></li>

<li><a href="/soft/7667.shtml" target="_blank">VB商品零售进销存程序含MSSQL数据库文件</a></li>

</ul>

<ul>

<li><a href="/jscss/code/1915.shtml" target="_blank">jQuery 模块拖动，拖动层效果，可淡入淡出</a></li>

<li><a href="/jscss/code/1914.shtml" target="_blank">jQuery单行新闻滚动</a></li>

<li><a href="/jscss/code/1913.shtml" target="_blank">经典的jQuery多行文本滚动</a></li>

<li><a href="/jscss/code/1912.shtml" target="_blank">JS图片切换学习版，没有过多修饰</a></li>

<li><a href="/jscss/code/1911.shtml" target="_blank">漂浮广告代码，Js演示</a></li>

<li><a href="/jscss/code/1910.shtml" target="_blank">边滚边停的JS图片滚动</a></li>

</ul>

<ul>

<li><a href="/soft/9217.shtml" target="_blank">递归读取数据库创建树控菜单的Delphi例子</a></li>

<li><a href="/soft/9199.shtml" target="_blank">VB抓取DLL或EXE应用程序内的图标资源</a></li>

<li><a href="/soft/9236.shtml" target="_blank">jQuery StartStopSlider 滚动切换插件</a></li>

<li><a href="/soft/9235.shtml" target="_blank">jQuery EasyUI 实例演示（菜单、TAB等）</a></li>

<li><a href="/soft/9227.shtml" target="_blank">VB+SQL2000考试卷（题库）生成与管理系统</a></li>

</ul>

</div>

</div>

<script>

<!--

var lis = document.getElementByIdx_x("Tabs").getElementsByTagName_r("li")

var uls = document.getElementByIdx_x("TabsCon").getElementsByTagName_r("ul")

var order = 0

for(var i=0i<lis.lengthi++){

lis[i].value = i

lis[i].onmouseover = function(){

ChangeTabs(this.value)

}

uls[i].className = "hidden"

}

lis[order].className = "cur"

uls[order].className = "block"

function ChangeTabs(nowTab){

lis[order].className = ""

uls[order].className = "hidden"

order = nowTab

lis[nowTab].className = "cur"

uls[nowTab].className = "block"

}

-->

</script>

</body>

</html>