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 >