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

 });

问题：当我点击第一个链接时，它的背景图像被更改，但下次当我点击其他链接时，它的背景也会改变，＆amp;第一个链接背景也类似。（当我点击第二个链接时，第一个链接图像应该回到基本一次。）

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

Answer 1

试试这个

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

新活动类的CSS是

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

Answer 2

为您希望活动li标记的内容创建一个类;并使用以下内容：

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

这应仅影响同一ul代码中的列表项。

点击<a> tag</a> </li>更改<li>的背景图片

2 个答案: