点击<li>标签改变<a>的背景图像

Question

html:

 <ul>
    <li id="Co" class="libgc" ><b>CO</b></li>
    <li id="NSCO" class="libgc active"><span> <a href="#NSale.php" target="homeFrame" class="aclass">NSale</a></span></li>
 </ul>

css:

.libgc {
background-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
background-image: url(../images/pcnav.png);
border: 1px solid #CCC;
}

jquery:

 $("li").click(function(){
    $(this).css('background-image', 'url("images/btnSelectedTab.png")');
    $(this).css('color','black');
  });

 });

问题:当我点击第一个链接时，它的背景图像发生了变化，但是下一次当我点击其他链接时，它的背景也发生了变化，第一个链接的背景也发生了类似的变化。(这意味着当我点击第二个链接时，第一个链接图像应该回到基本链接一次)。

当我单击其他链接时，如何将背景图像重置为上一张。

Answer 1

尝尝这个

$("li").click(function(){
    $("li").removeClass("active");
    $(this).addClass("active");
  });

新活动类的CSS是

li.active {
   background-image: url(../images/btnSelectedTab.png);
   color: black;
}

Answer 2

为您希望active li标记看起来像什么创建一个类；并使用以下方法：

$('li').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

这应该只影响相同ul标记中的列表项。