如何設置後，它包括圖像和div跨度內容在JQUERY

我有一個代碼使用CSS精靈，因爲代碼工作，雖然我點擊圖像和整個div內容改變顏色包括內容詞。但是當我點擊與圖像堆疊的內容單詞時，內容單詞確實會改變顏色，但圖像仍然保持原樣而不改變爲藍色。如何設置後，它包括圖像和div跨度內容在JQUERY

我們可以通過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：

來源

2016-09-22 Morgan Ng

您可以發佈您的JS也？也許創建一個[小提琴]（https://jsfiddle.net/）？ –

@IvanModric嗨，即時新的發展，因爲我的學生，因此我不知道js方法 –

你可以指定你想達到什麼？當一個按鈕被點擊時，它應該改變顏色？ –

更改您的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>

來源

2016-09-22 09:44:46 xxxmatko

嗨你的代碼不是正確的方式，因爲這個詞被移動到圖像中 –

圖像外面的「移動詞語」就是關於CSS的。 – xxxmatko

謝謝，它的工作，我修改了css文件 –

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

來源

2016-09-22 09:46:41

如何設置後，它包括圖像和div跨度內容在JQUERY

回答

相關問題