Question

点击按钮，我正在尝试更改导航栏的颜色。它必须在多个页面上，所以我认为使用CSS将是最好的方式。但我不知道该怎么做。

我试图改变无序列表的颜色

<ul id="tm-menu" class="tm-menu menu">
</ul>

如何使用jQquery更改.menu样式“background-color”？

Answer 1

试试这个

用于.addClass() Jquery

<强>的CSS

.menuBackground{
background:red;
}

jquery代码

$('#tm-menu').click(function(){
   $(this).addClass('menuBackground');
});

Answer 2

让我们说.button是你按钮的类，而.blue是你的菜单新背景颜色的类。

/ ------------------- Jquery Code ------------ /

$(document).ready(function(){
$('.button').click(function(){
$('.menu').addClass('blue');
});
});

/ ---------------------的CSS ---------------- /

.blue{
background-color:blue;
}

Answer 3

使用简单的jquery addClass（）或removeClass（）方法可以达到这个效果。

或者如果你想点击按钮点击课程，你可以在代码下面。

/*Switch the classes on Button click*/
$("button").click(function(){
 $( "ul.menu" ).toggleClass("tm-menu, newclass");
}); 


/*Add or Remove the Class on Click*/
$("button").click(function(){
 $( "ul.menu" ).removeClass( "tm-menu" ).addClass( "newclass" );
});

<ul id="tm-menu" class="tm-menu menu">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
  <li>Option 5</li>
</ul>
  <button value="Hitme">Hit Me</button>

这是工作演示链接。 http://jsbin.com/curidivo/1/

Answer 4

你可以使用.addClass（）或.css（）

$('.menu').addClass('someClass'); //preferred method

或

$('.menu').css( "background-color", "#f00" );

JS：

$('.thebutton').on('click',function(){
   $('.menu').addClass('someClass'); //replace with options above
});

Answer 5

$(document).ready(function(){
   $('.buttonClass').click(function(){
        $('.menu').addClass('className');
   });
});

检查addclass和click

如何在使用JS单击按钮时更改CSS样式

5 个答案: