Bootstrap实现导航栏实时Active

 Coding
Likt
  205

在全自定义页面中,想实现导航栏链接在线Active,通常需要JavaScript判断URL与设定是否相符。
本文通过Jquery对ULLI进行遍历,添加类Active,实现判断效果。

示例代码:
定义实现类:likt-header

<!--自适应导航栏-->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-likt" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
               data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="index.php"><div class="navbar-brand brand-likt"></div></a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav likt-header">
            <li><a href="index.php">Homepage</a></li>
        </ul>
    </div>
    </div>
</nav>
<script type="text/javascript">
//判断激活状态
$(document).ready(function(){
    $(".likt-header").find("li").each(function () {
        var a = $(this).find("a:first")[0];
        if ($(a).attr("href") === location.pathname) {
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    });
});
</script>
根据《互联网跟帖评论服务管理规定》,您需要登录后才能进行留言,您的相关信息由畅言云评进行采集,感谢您的配合。