jquery导航栏点击选中效果

html代码：

<header>

 <div class="navbar-nav">

   <li class="active"><a href="#">首页</a></li>

   <li><a href="#">新闻</a></li>

   <li><a href="#">活动</a></li>

   <li><a href="#">项目</a></li>

 </div>

</header>

style样式代码：

header {

   background-color: #3A94FF;

   color: #FFF;

}

header a{

   color: #FFF;

   text-decoration: none;

}  

li {

   line-height: 50px;

   background-color: #3A94FF;

   display: inline-block;

   padding: 0 20px;

}

li.active {

   background-color: rgba(255,142,0,1.00);

}

js代码：

<script>

   $(document).ready(function (){

       $(".navbar-nav>li").each(function(index){

           $(this).click(function(){

               $("li").removeClass("active");

               $("li").eq(index).addClass("active");

           });

       });

   });

</script>

关注公众号：拾黑（shiheibook）了解更多

友情链接：

下软件就上简单下载站：https://www.jdsec.com/
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/