單擊導航欄切換時如何更改導航欄顏色

Question

單擊導航欄切換時，我需要幫助來更改我的導覽欄導航欄顏色。它只是不會工作。

$(".navbar-toggle").click(function() { 
$(".navbar").css("background","yellow"); 
}) 

Answer 1

這裏是jsFiddle

$(".navbar-toggle").click(function(){ 
$("nav").toggleClass("navbar-yellow"); 
}) 

在CSS創建該類

.navbar-yellow{ 

    background-color: yellow !important; 
} 

其導航欄默認是給灰色。

Answer 2

更改此：

$(".navbar").css("background","yellow"); 

這樣：

$(".navbar").css("background","yellow !important"); 

引導默認導航欄的CSS很可能覆蓋要添加的一個。使用!important覆蓋它。

Answer 3

您應該創建一個自定義css類並在用戶與您的UI進行交互時添加它。

//into your css file 
.navbar.activated { 
    background: yellow; 
} 


//into your js file 
$(".navbar-toggle").click(function() { 
    $(".navbar").addClass("activated"); 
});