Bootstrap：手动输入url时根据路由保持活动状态
Posted
技术标签:
【中文标题】Bootstrap：手动输入url时根据路由保持活动状态【英文标题】：Bootstrap: maintaining active state based on routing when manually entering url 【发布时间】：2017-08-18 18:32:22 【问题描述】：这是一个运行良好的 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");
);
);
该应用程序运行良好，除了尝试在浏览器导航器中手动输入网址时，例如，如果活动选项卡是 Home 并且我选择 http://localhost:8080/news/ 状态为 News，但活动类仍在 Home
【问题讨论】：
【参考方案1】：如果你直接访问 /news，你的函数永远不会被执行。它仅在单击导航链接时执行。您希望在初始加载以及状态更改时执行该函数。
更好的方法是完全避免使用 jQuery 并以“Angular 方式”来做事。您可以为导航栏创建一个控制器，并在您的状态发生变化时在适当的元素上设置 active 类。
【讨论】：
【参考方案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时根据路由保持活动状态的主要内容，如果未能解决你的问题，请参考以下文章
当用户在浏览器选项卡中手动更改 url 时，防止在 React 中路由