开发者社区> 问答> 正文
1
0
分享

jquery实现导航高亮问题

代码如下,想实现的效果:打开页面时第一个链接高亮,之后点击任意一个链接,有且只有该链接高亮。
目前存在的问题是,会同时存在上下两个链接高亮。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
body, ul, ol, li, div, p {
    margin:0px;
    padding:0px;
}
ul {
    list-style-type:none;
    border:1px solid blue;
    background:#4f5b93;
    height:45px;
}
ul li {
    float:left;
    heihgt:45px;
    line-height:45px;
    width:100px;
    text-align:center;
}
ul li a:link, a:visited {
    color:#fff;
    text-decoration:none;
}
.act {
    background:#ff6600;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>

$(function(){
$('.menu ul li').eq(0).addClass("act");
 $('ul li').each(function(){
   $(this).click(function(){
       $(this).addClass("act").siblings().removeClass("act");
      });
  });
})
</script>
</head>

<body>
<div class="menu">
    <ul>
        <li><a>首页</a></li>
        <li><a>随笔</a></li>
        <li><a>素材</a></li>
        <li><a>编程</a></li>
    </ul>
</div>
<div class="menu2">
    <ul>
        <li><a>首页</a></li>
        <li><a>随笔</a></li>
        <li><a>素材</a></li>
        <li><a>编程</a></li>
    </ul>
</div>
</body>
</html>

展开
收起
小旋风柴进 2016-03-13 16:24:25 1876 0
举报
1 条回答
写回答
取消 提交回答
  •  <script>
    
    $(function(){
    $('.menu ul li').eq(0).addClass("act");
    var t=$('.menu ul li').eq(0);
     $('ul li').each(function(){
       $(this).click(function(){
     t.removeClass("act");
           $(this).addClass("act").siblings().removeClass("act");
           t=$(this); 
    
          });
      });
    })
    </script>
    
    2019-07-17 19:02:49 举报
    赞同 评论 打赏

    评论

    全部评论 (0)

    登录后可评论
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载