我是bootstrap和jquery的初學者。 我無法使用jquery更改導航欄的.active。爲什麼我無法在引導欄中更改.active狀態?
在頭部分,我已經導入了bootstrap和jquery。
<link href="./dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
這裏是我的代碼
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ><a href="#">Home</a></li>
<li class="active"><a href="http://ezcourse.nctu.me/">Tutorial</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
這是我的js代碼。
$(function() {
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
});
當我點擊不同<一個>標籤,該狀態。活躍並沒有改變。
我GOOGLE了,我覺得這個例子 Bootstrap navbar Active State not working
不過,我試圖複製這些代碼,並在我的代碼粘貼。 jsfiddle example 它仍然沒有工作。
但是,它可以在他們的網頁上工作。
我不知道如何解決這個問題?
也許一個緩存的問題......你有沒有嘗試空嗎? – JazZ
我試圖刪除其他組件。它仍然不起作用...... –