Question

jquery当前选中高亮问题

JS部分
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nav ul li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
});
</script>

CSS部分
.active { background:#000}

这是一个header文件，但是现在这样写，点击链接之后每次高亮的都是首页有class不能实现当前点击高亮
这个文件是被调用的。每个页面都调用有，求大神教育。

HTML部分

<div class="nav">
<ul>
<a href="index.asp"><li class="active"><span class="STYLE2">首 页</span></li></a>
<a href="about.asp?id=229"><li><span class="STYLE2">关于我们</span></li></a>
<a href="tczx_view.asp?id=659"><li><span class="STYLE2">套餐装修</span></li></a>
<a href="pic.asp?lmid=83"><li><span class="STYLE2">网上展厅</span></li></a>
<a href="pic.asp?lmid=276"><li><span class="STYLE2">经典案例</span></li></a>
<a href="news.asp?lmid=266"><li><span class="STYLE2">新闻中心</span></li></a>
<a href="news.asp?lmid=267"><li><span class="STYLE2">团队精英</span></li></a>
<a href="gcfw.asp?id=222"><li><span class="STYLE2">工程服务</span></li></a>
<a href="guestbook.asp"><li><span class="STYLE2">在线订单</span></li></a>
<a href="about.asp?id=205"><li><span class="STYLE2">联系我们</span></li></a>
</ul>
</div> 　　　

Answer 1

首先，HTML部分的标签嵌套是错误的，这是不符合W3C标准的写法，<ul>标签的下一级只能是<li>标签而不能是其它，另外块元素的<li>标签不能嵌套在行内元素<a>标签内。正确的HTML代码应是：

<div class="nav">
   <ul id="Nav"> <!-- 加了一个id属性，为后面js做准备 -->
      <li class="active">
          <a href="index.asp"><span class="STYLE2">首 页</span></a>
      </li>
      <li>
          <a href="about.asp?id=229"><span class="STYLE2">关于我们</span></a>
      </li>
      <li>
          <a href="tczx_view.asp?id=659"><span class="STYLE2">套餐装修</span></a>
      </li>
      <li>
          <a href="pic.asp?lmid=83"><span class="STYLE2">网上展厅</span></a>
      </li>
      <!-- 以下部分省略 -->
   </ul>
</div>

这样改后，CSS方面要调整下，使其符合你的预期效果：

.active {background:#000}
.nav li {height:40px} /* 为导航菜单下的li标签设置高度（此处假设为40px） */
.nav a {display:block; height:100%} /* 让导航菜单下的a标签占满整个li标签 */

最后是javascript部分（使用jQuery）：

$(document).ready(function(){         
    $("#Nav > li").find("a").click(function(){
        $("#Nav").find("li").removeClass("active");
        $(this).parent("li").addClass("active");
    });
});

追问

能远程给我看看吗？

现在的问题是它页面重新加载完成之后就会把active重新给第一个li

追答

可以，发私信你。

Answer 2

你的html是a标签包裹着li标签，试试修改成li包裹a。
或者将js的选择器换为：$(".nav ul a")

追问

过程是完成了，但是不能锁定到click这个li，重新加载完成之后，又会被重新分配给了第一个li 了，而不是this这个li了。不知道怎么回事