Bootstrap 的导航栏如何切换 active

• Bootstrap 框架可以很方便的帮助我们完成对页面的布局
• 想要详细了解 Bootstrap 的可以去 菜鸟教程学习相关的组件或者去Bootstrap 中文网

状态类 active 的作用

官方的解释为： 鼠标悬停在行或单元格上时所设置的颜色
个人的理解为： 将选中的标签展示出设置的颜色（仅供参考，可能理解有误）
效果可参考下图

实现点击点击不同的标签切换 active

上面图片是使用无序列表 实现的一个导航栏

      <ul class="nav navbar-nav navbar-right" id="ul_header">
                    <li class="active"><a href="/">主页</a></li>
                    <li><a href="#">热门分析</a>
                    </li>
                    <li><a href="#">数据查询</a>
                    </li>

                    <li><a href="#">数据分析</a>
                    </li>

                </ul>

想要实现 点击不同的 li 标签 则 将 active 切换到改标签 需要加上 下面的 jQuery 代码

<script >
$(document).ready(function () {
	// each 是 为每一个匹配的元素 执行定义的方法
    $("#ul_header").find("li").each(function () {
      var a = $(this).find("a:first")[0];
      // location.pathname 获取 当前浏览器上的url 地址
      if ($(a).attr("href") === location.pathname) {
        $(this).addClass("active");
      } else {
        $(this).removeClass("active");
      }
    });

});
</script >

这种方式是 当加载完页面后会先到目标选择器下面的所有的li标签，对其a标签的链接地址进行判断，如何和当前浏览器的地址一致，就认为是当前应该激活的菜单，添加active类，否则就取消

以上只是自己实际开发中遇到的问题，所找到的解决方法 ，仅供参考！！！！