Question

我有menu.php.i想要包含所有其他file.so我有错误更改菜单背景颜色＆amp;点击事件的字体颜色。请检查我的代码给我解决方案。谢谢。

在css文件中。新增{背景色：＃000;颜色：#FFF;}

在js文件中

<script type="javascript">

    $(".clickme").click(function(){
    $(this).css('background-color':'#000','color':'#fff');
    $(li:first-child).removeClass('add');
 }); 

</script>

在html文件中

<ul>


 <li class="clickme add"><a herf="">Home</a></li>
 <li class="clickme"><a herf="">Services</a></li>
 <li class="clickme"><a herf="">Porfile</a></li>
 <li class="clickme"><a herf="">About Us</a></li>
 <li class="clickme"><a herf="">Contact Us</a></li>



</ul>

enter code here

Answer 1

您的代码中缺少{}括号，因此您的代码甚至无法在jquery中编译。您可以执行此操作，如下所示： -

$(document).ready(function(){
       $(".clickme").click(function(){
         $(this).css({'background-color':'#000','color':'#fff'});         
 }); 
});

演示： -

http://jsfiddle.net/DXQ5j/21/

Answer 2

你忘了css()函数中的括号，正如Neel所说。

并设置更智能的模式，以便在找到时删除添加类。

参见：http://jsfiddle.net/don/j2cgttuL/2/

HTML：

<ul>
    <li class="clickme add"><a herf="">Home</a></li>
    <li class="clickme"><a herf="">Services</a></li>
    <li class="clickme"><a herf="">Porfile</a></li>
    <li class="clickme"><a herf="">About Us</a></li>
    <li class="clickme"><a herf="">Contact Us</a></li>
</ul>

jQuery的：

$('.clickme').click(function() {
    // Change background on click
    $(this).css({'background-color':'#000','color':'#fff'});

    // Remove class add     
    $('ul li').removeClass('add');
});

Answer 3

做了一些调整

http://jsfiddle.net/victor_007/2q9wyheh/2/

HTML

<ul>
    <li class="clickme add"><a herf="">Home</a></li>
    <li class="clickme"><a herf="">Services</a></li>
    <li class="clickme"><a herf="">Porfile</a></li>
    <li class="clickme"><a herf="">About Us</a></li>
    <li class="clickme"><a herf="">Contact Us</a></li>
</ul>

CSS

ul li{
    background-color: transparent;
    color:#000;
}
.add{
    background-color:#000;
    color:#fff;
}

jquery的

$('.clickme').click(function() {
    $("ul li.clickme").removeClass("add")
    $(this).addClass("add")

});

Answer 4

<div id="top" class="shadow">
  <ul class="gprc"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Text1</a></li> 
    <li><a href="#">Text2</a></li> 
    <li><a href="#">Text3</a></li> 
    <li><a href="#">Text4</a></li> 
  </ul> 
</div>
<style>
.active {
    background-color:red;
}
</style>
<script>
$("#top a").click(function() {
    $('#top a').removeClass("active");
    $(this).addClass("active");
});
</script>

http://jsfiddle.net/suryakiran/wfjcpsvr/

动态菜单背景颜色随jquery而变化

4 个答案: