点击后如何设置它包括JQUERY中的图像和div跨度内容

Question

I have a code using CSS sprite , as the code is working although i clicking on the image and the whole div contents change color include the contents word . But when i clicking on the contents word which stacked with images indeed the contents word does the changes of the color but the images still remain as the same without changing to blue.

Can we do it in Jquery method to make this function work ?

 /*Hide the Radio Button*/ .games-sub-menu input[type=radio] { display: none } /*Set a box for the label, this is what is clicked on*/ .games-sub-menu label { display: block; width: 150px; height: 100px; } /*Set Images...this would work better with sprites*/ .games-sub-menu label.topimgG1 { background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1"); } .games-sub-menu input[type=radio]:checked + label.topimgG1 { background-image: url("http://placehold.it/150x100/?text=Image1"); } .games-sub-menu label.topimgG2 { background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2"); } .games-sub-menu input[type=radio]:checked + label.topimgG2 { background-image: url("http://placehold.it/150x100/?text=Image2"); } 

 <div class="games-platform-item pt-item"> <ul class="games-sub-menu clearfix"> <li class="tab1 current"> <input type="radio" name="imgSwap" id="rdoImg1"> <label class="topimgG1" for="rdoImg1"></label> <span>编辑精选</span> </li> <li class="tab2 current"> <input type="radio" name="imgSwap" id="rdoImg2"> <label class="topimgG2" for="rdoImg2"></label> <span>编辑精选</span> </li> </ul> </div> 

Image of the div :

Answer 1

Change your html code that way, that the span which holds the text will be the child element of the label, that way, clik on the text will also be click on the label which will change the check state of the input, and your css will change too:

<div class="games-platform-item pt-item">
  <ul class="games-sub-menu clearfix">
    <li class="tab2 current">
      <label class="topimgG2" for="rdoImg2">
         <input type="radio" name="imgSwap" id="rdoImg2">
         <span>编辑精选</span>      
      </label>
    </li>
  </ul>
</div>

Here is an example, I changed also your css a little bit:

 .games-sub-menu input[type=radio] { display: none } .games-sub-menu label { display: block; width: 150px; height: 100px; margin-bottom: 2em; } .games-sub-menu label.topimgG1 span::before { display:block; width: 100%; content: "\\00a0"; height: 100%; background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1"); } .games-sub-menu label.topimgG2 span::before { display:block; width: 100%; content: "\\00a0"; height: 100%; background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2"); } .games-sub-menu label.topimgG1 input[type=radio]:checked + span::before { background-image: url("http://placehold.it/150x100/?text=Image1"); } .games-sub-menu label.topimgG2 input[type=radio]:checked + span::before { background-image: url("http://placehold.it/150x100/?text=Image2"); } 

 <div class="games-platform-item pt-item"> <ul class="games-sub-menu clearfix"> <li class="tab1 current"> <label class="topimgG1" for="rdoImg1"> <input type="radio" name="imgSwap" id="rdoImg1"> <span>编辑精选</span> </label> </li> <li class="tab2 current"> <label class="topimgG2" for="rdoImg2"> <input type="radio" name="imgSwap" id="rdoImg2"> <span>编辑精选</span> </label> </li> </ul> </div> 

Answer 2

On click event just change the background image of that particular div whereever you are clicking.

By jQuery you can remove previous class and add another class which has different background property.

Example -

.games-sub-menu label.topimgG1Clicked {
  background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=ImageChangedImage");
}

In javascript click event:

$(this).closest('label').removeClass('topimgG1');
$(this).closest('label').removeClass('topimgG1Clicked');