jquery导航栏点击及页面跳转后对应栏目添加选中效果

导航栏点击添加选中样式是比较好实现的,点击后添加一个 .active 再给它设置一个样式就可以了。

html代码:

<header>
    <div class="navbar-nav">
        <li class="active"><a href="index.html">首页</a></li>
        <li><a href="news.html">新闻</a></li>
        <li><a href="activity.html">活动</a></li>
        <li><a href="project.html">项目</a></li>
    </div>
</header>

style样式代码:

<style>
        header{
            background-color: #C50B10;
            color: #FFF;
        }
        li{
            line-height: 50px;
            background-color: #C50B10;
            display: inline-block;
            padding: 0 20px;
        }
        li.active{
            background: rgba(0,0,0,.2);
        }
</style>

js代码:

<script>
    $(document).ready(function (){
        $(".navbar-nav>li").each(function(index){
            $(this).click(function(){
                $("li").removeClass("active");
                $("li").eq(index).addClass("active");
            });
        });
    });
</script>

实现效果:

Title.png jquery导航栏点击及页面跳转后对应栏目添加选中效果 HTML笔记

但是一般页面的导航栏都是需要跳转页面的,上面的方法只在当前页面有效,跳转后就失效了。

要实现跳转后,对应的栏目自动添加选中效果,可以用下面的方法。

js代码:

<script>
    $(document).ready(function () {
        $(".navbar-nav>li a").each(function () {
            if ($($(this))[0].href == String(window.location))
                $(this).parent().addClass('active');
        });
    });
</script>


未经允许不得转载:w3h5 » jquery导航栏点击及页面跳转后对应栏目添加选中效果

赞 (3)
分享到: +

评论 3

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)
  1. #1
    访客
    有一个小问题,按照这种方法,点击第二个li标签,首页默认的li标签样式和第二个样式一样
    访客 6个月前 (05-18)回复 取消评论
  2. #2
    访客
    可能是应该我的两个li标签链接指向 一个是xxx.com 一个是xxx.com/?xxx 是这个原因吗?
    访客 6个月前 (05-18)回复 取消评论
    • Deshun
      这种情况不需要给首页的li添加默认的选中样式,首页加载完也会给首页的li添加class类名。
      Deshun 5个月前 (05-20)回复 取消评论