Jquery高亮当前选中菜单

2018-01-03  本文已影响0人  阿泽453

用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>
上一篇 下一篇

猜你喜欢

热点阅读