BootStap导航的active样式切换

本文主要是介绍BootStap导航的active样式切换，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在官方给出的导航组件中active固定在第一个导航项的位置，active样式无法进行切换。

注：需要引入 jquery 以及 bootstrap 。

<ul class="nav navbar-nav"><li class="active"><a href="#a">a <span class="sr-only">(current)</span></a></li>                      <li><a href="#b">b</a></li><li><a href="#c">c</a></li><li><a href="#d">d</a></li>
</ul>

  
//给当前元素设置新的样式，并删除当前元素的同胞元素的样式$('.nav').find('a').each(function () {$(this).click(function () {$(this).parent().addClass('active')$(this).parent().siblings().removeClass("active")// 或者写成一句                //$(this).parent().addClass('active').siblings().removeClass("active")})})

siblings()用于查找当前元素的同胞元素，就是拿到当前元素的兄弟节点(不包括自己)。  

见教程：jQuery siblings() 方法

这篇关于BootStap导航的active样式切换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---