Question

这是一个运作良好的plnkr示例：http://plnkr.co/edit/p45udWaLov388ZB23DEA?p=preview

具有2个链接的导航（路由到2个ui-router状态），以及在活动链接上维护活动类的jQuery方法。

的index.html

<body ng-app='myApp'>
  <ul class="nav nav-pills">
    <li role="presentation" class="active"><a ui-sref="home">Home</a></li>
    <li role="presentation"><a ui-sref="news">News</a></li>
  </ul>
  <ui-view></ui-view>
</body>

app.js

angular.module('myApp', ['ui.router'])
    .config(function($stateProvider){
      $stateProvider.state('home', {
        url : '/home',
        template: '<h1>home</h1>'
      });
      $stateProvider.state('news', {
        url : '/news',
        template: '<h1>news</h1>'
      });

});

的script.js

$(document).ready(function(){
  $(".nav a").on("click", function(){
    $(".nav").find(".active").removeClass("active");
    $(this).parent().addClass("active");
 });
});

该应用运行正常，但尝试在浏览器导航器中手动输入网址时，例如，如果有效标签为主页，我选择 http://localhost:8080/news/ < / strong>州政府选择新闻，但活跃课程仍在主页

Answer 1

如果直接转到/ news，您的功能永远不会被执行。它仅在单击导航链接时执行。您希望在初始加载时以及状态发生变化时执行该功能。

更好的方法是完全避免使用jQuery并以“Angular方式”执行操作。您可以为导航栏创建控制器，并在状态发生变化时在适当的元素上设置active类。

Answer 2

直接浏览页面时，onClick函数不会执行。虽然你可以使它工作

$(document).ready(function() {
    $PageName = window.location.href.split('/').pop();
    $PageName = $PageName.toLowerCase();
    $(".nav a").each(function() {
        $this = $(this);
        if($this.text().toLowerCase() == $PageName) {
            $this.parent().addClass("active");
        }
    });
});

Bootstrap：手动输入URL

2 个答案: