<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li {
display: inline-block;
width: 100%;
height: 30px;
line-height: 30px;
}
li:active, li:focus, li-active {
background: #dddddd;
color: red;
}
</style>
<script type="text/javascript">
onload = function () {
function removeActiveClass(node) {
nodeclassName = '';
}
documentquerySelector('ul[id=test]')onclick = function (e) {
ArrayprototypeforEachcall(documentquerySelectorAll('ul[id=test] > li'), removeActiveClass);
var target = etarget;
targetclassName = 'li-active';
}
}
</script>
</head>
<body>
<ul id="test">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>原因：你点击左侧菜单，整个页面被刷新了，从而始终第一个被选中
方法一：
点击左侧菜单的时候，顺便把参数带过去到后台，然后从后台返回，获取参数，你就知道是点击了哪个然后再进行你的第二种设置。
方法二：
利用jquery的ajax，无刷新跳转获取数据<html>
<head>
<meta >1、给每个导航选项一个属性，保存楼层id；
2、每个楼层都有一个id；
3、监听页面滚动事件，如果当前滚动到某一个楼层，就更新导航选中。
不一定非要是id，主要是维护两者对应关系。首先结构如下：
<style>nav>li {width:120px;height:40px;display:inline-block;padding:5px 15px;background:#ddd;text-align:center}nav li ul {display:none}subnav li {padding:5px}nav li:hover subnav {display:block;background: #e8e8e8}
</style>
<ul class="nav">
<li><a href="">一级菜单1</a>
<ul class="subnav">
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
<li><a href="">一级菜单2</a>
<li><a href="">一级菜单3</a>
</ul>很简单吧，大概是：
<div class="menu">
<ul>
<li>这里是菜单</li>
<li>这里是菜单</li>
<li>这里是菜单</li>
<li>这里是菜单</li>
<li>这里是菜单</li>
<li>这里是菜单</li>
</ul>
</div>
<div class="line">这里是下方那条线</div>
其他是CSS的LI
menu ul { margin:0; padding:0; list-style:none;}
menu li {
width:80px; height:24px; color:#fff; background:#666; float:left; margin-left:1px;}
line { border-top:6px solid #000; maring-top:1px;}
大概是这样子的，如果你要细化还有要把<a>写上去把里面的地址换成你的 就好啦 自己研究一下吧
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v30
var i,x,a=documentMM_sr; for(i=0;a&&i<alength&&(x=a[i])&&xoSrc;i++) xsrc=xoSrc;
}
function MM_preloadImages() { //v30
var d=document; if(dimages){ if(!dMM_p) dMM_p=new Array();
var i,j=dMM_plength,a=MM_preloadImagesarguments; for(i=0; i<alength; i++)
if (a[i]indexOf("#")!=0){ dMM_p[j]=new Image; dMM_p[j++]src=a[i];}}
}
function MM_findObj(n, d) { //v401
var p,i,x; if(!d) d=document; if((p=nindexOf(""))>0&&parentframeslength) {
d=parentframes[nsubstring(p+1)]document; n=nsubstring(0,p);}
if(!(x=d[n])&&dall) x=dall[n]; for (i=0;!x&&i<dformslength;i++) x=dforms[i][n];
for(i=0;!x&&dlayers&&i<dlayerslength;i++) x=MM_findObj(n,dlayers[i]document);
if(!x && dgetElementById) x=dgetElementById(n); return x;
}
function MM_swapImage() { //v30
var i,j=0,x,a=MM_swapImagearguments; documentMM_sr=new Array; for(i=0;i<(alength-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){documentMM_sr[j++]=x; if(!xoSrc) xoSrc=xsrc; xsrc=a[i+2];}
}
//-->
</script>
<body onload="MM_preloadImages('images/menu_1_2jpg','images/menu_2_2jpg')">
<table width="1001" border="0" cellpadding="0" cellspacing="0" class="moddle_one">
<tr>
<td width="1019" height="80" align="center">
<img src="images/标题_logojpg" width="1000" height="80" align="left" /> </td>
</tr>
</table>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）