點擊后如何設置它包括JQUERY中的圖像和div跨度內容

Question

我有一個使用CSS精靈的代碼，因為代碼工作，雖然我點擊圖像和整個div內容更改顏色包括內容字。 但是當我點擊堆疊有圖像的內容詞時，內容詞確實改變了顏色，但圖像仍然保持不變而不改變為藍色。

我們可以用Jquery方法來實現這個功能嗎？

 /*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> 

div的形象：

Answer 1

以這種方式更改你的html代碼，保存文本的span將是標簽的子元素，這樣，文本上的clik也會點擊標簽，這將改變輸入的檢查狀態，以及你的css也將改變：

<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>

這是一個例子，我也改變了你的css：

 .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

在click事件上，只需更改您單擊的特定div的背景圖像。

的jQuery你可以刪除以前的class並添加另一個class具有不同的背景屬性。

示例 -

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

在javascript click事件：

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