hubei8722 2016-01-08 03:28 采纳率: 60%
浏览 1672
已采纳

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>
  • 写回答

3条回答 默认 最新

  • tony4geek 2016-01-08 03:40
    关注
     <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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)