基于模板更改引导导航栏答案

【问题标题】：Changing bootstrap navbar based on template基于模板更改引导导航栏
【发布时间】：2015-06-29 14:48:23
【问题描述】：

所以，我希望在我网站的每个页面上都有相同的默认引导导航栏。如果我更改一页的名称（例如：第 1 页），我希望在我的所有页面中更改它。据我了解，我可以只使用 jQuery 单独加载标题。但是，这似乎并没有为当前处于活动状态的页面拉出“活动”类。我将如何仅在当前处于活动状态的页面上拥有“活动”类。

仅供参考，我正在使用 AngularJS 框架。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="">Home</a></li> <!-- Change this ".active" class-->
        <li><a href="/page1">Page 1</a></li>
        <li><a href="/page2">Page 2</a></li>
        <li><a href="/page3">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>
  
</body>
</html>

编辑：另外，指向其他页面的链接也会改变。例如，如果我在第 1 页，则指向主页的链接将是 "../"，指向第 2 页的链接将是 "../page2"，指向自身的链接将是 ""。

【问题讨论】：

如果您使用 Angular 使用 ng-class 并根据当前路由/状态 url 有条件地设置 active
Set active tab style with AngularJS 的可能重复项

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

我不知道 AngularJS，但我在我的网站上使用了这个 javascript：

$('.navbar').find('a').each(function()
{
    if (window.location.href.indexOf($(this).attr('href')) > -1)
    {
            $(this).parent().addClass('active');
    }
});

【讨论】：