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.