Bootstrap Navbar颜色在按下时不会改变
[英]Bootstrap Navbar color not changing when pressed
问题描述
我想在按下链接时更改活动类，但它似乎不起作用。
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">
<a href="/">HOME</a>
</li>
<li>
<a href="/test1">TEST1</a>
</li>
<li>
<a href="/test2">TEST2</a>
</li>
</ul>
</div>
</nav>
这就是我尝试过的。 但这似乎不起作用。 无论我按什么， HOME始终处于活动状态。 有任何想法吗？
<script>
$(document).ready(function () {
$('ul.nav > li > a').click(function () {
$('ul.nav > li').removeClass('active');
$(this).parent().addClass('active');
});
});
</script>
编辑：某些链接更改后，它可以工作。 我还有一个问题，如何使活动类转到其他页面时不会重置为HOME？
2 个解决方案
解决方案1
0 已采纳 2017-10-30 07:57:35
检查您是否正确加载了Boostrap框架（链接和脚本），它工作正常：
$(document).ready(function () { $('ul.nav > li > a').click(function (e) { e.preventDefault() $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); }); });
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar navbar-default navbar-static-top navbar-inverse"> <div class="container"> <ul class="nav navbar-nav"> <li class="active"> <a href="/">HOME</a> </li> <li> <a href="/test1">TEST1</a> </li> <li> <a href="/test2">TEST2</a> </li> </ul> </div> </nav>
解决方案2
0 2017-10-30 07:58:10
我已经测试过您的代码。 它的工作。 请检查以下内容。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('ul.nav > li > a').click(function () {
$('ul.nav > li').removeClass('active');
$(this).parent().addClass('active');
});
});
</script>
<style>
li.active {
background-color: red;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">
<a href="javascript:;;">HOME</a>
</li>
<li>
<a href="javascript:;;">TEST1</a>
</li>
<li>
<a href="javascript:;;">TEST2</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
滚动时更改颜色导航栏引导程序
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.