美文网首页
Jquery高亮当前选中菜单

Jquery高亮当前选中菜单

作者: 阿泽453 | 来源:发表于2018-01-03 15:40 被阅读0次

用Jquery来实现这种效果,原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。
此方法支持动态链接和静态链接多种形式。

<div id="navbar" class="navbar-collapse collapse pull-right">
          <ul class="nav navbar-nav">
              <li class=""><a href="/">首页</a></li>
              <li class="dropdown">
                      <a href="链接地址" class="dropdown-toggle" data-toggle="dropdown" role="button">技术 <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                            <li><a href="链接地址">JAVA</a></li>
                      </ul>
              </li>
              <li><a href="链接地址">PHP</a></li>
              <li><a href="链接地址">Python</a></li>
          </ul>
</div>
<script type="text/javascript">
        var urlstr = location.href;
        var urlstatus=false;
        $("#navbar .nav > li > a").each(function () {
            if (urlstr.indexOf($(this).attr('href')) > -1 && $(this).attr('href')!='') {
              $(this).parent().addClass('active').siblings().removeClass('active'); 
              urlstatus = true;
            }
        });
        $("#navbar .nav > li > ul > li > a").each(function () {
            if (urlstr.indexOf($(this).attr('href')) > -1 && $(this).attr('href')!='') {
              $(this).parent().parent().parent().addClass('active').siblings().removeClass('active'); 
              urlstatus = true;
            } 
        });
 </script>

相关文章

网友评论

      本文标题:Jquery高亮当前选中菜单

      本文链接:https://www.haomeiwen.com/subject/szwhnxtx.html