美文网首页
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