单击导航栏切换时如何更改导航栏颜色

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"); 
});