更改< li>的背景图片点击< a>标签 [英] Change background image of <li> on click of <a> tag

问题描述

html：

 < ul> 
< li id =Coclass =libgc>< b> CO< / b>< / li> 
< li id =NSCOclass =libgc active>< span> < a href =＃NSale.phptarget =homeFrameclass =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： b

  $（li）click（function（）{
 $（this）.css（'background-image'，'url images / btnSelectedTab.png）'）; 
 $（this）.css（'color'，'black'）; 
}）; 
 
}）;问题：当我点击第一个链接时，其背景图片发生了变化，但是下一次我点击时在其他链接，其背景也改变，&第一个链接背景也是类似的。（当我点击第二个链接时，第一个链接图片应该回到基本的一次。）
 
 
 
如何重置背景图片到
 
 
解决方案
尝试此
  $（li）click（function（）{
 $（li）。removeClass（active）; 
 $ ）.addClass（active）; 
}）; 
  
新活动类的CSS是
  li.active {
 background-image：url（../ images / btnSelectedTab.png）; 
 color：black; 
} 
  
 
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');
  });

 });
Problem : When I click on first link its background image is changed, but again next time when I click on other link,its background is also changed, & first links background is also similar.(Meant when I click on 2nd link, 1st links image should get back to the basic once.)

How to reset background image to the previous one,when I click on some other links.
解决方案
Try this
$("li").click(function(){
    $("li").removeClass("active");
    $(this).addClass("active");
  });
CSS for the new active class is
li.active {
   background-image: url(../images/btnSelectedTab.png);
   color: black;
}


                        
这篇关于更改&lt; li&gt;的背景图片点击&lt; a&gt;标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！