0
我遇到了一個網站上的問題，我在網頁中有3個不同的選項卡，並且它們都具有相同的菜單它的頂部，包括複選框。它的目的是檢查某些搜索過濾器。複選框的樣式看起來更像是單選按鈕，但功能類似於普通的複選框。帶有複選框的選項卡式菜單：一個菜單正在檢查另一個菜單，但不是它自己
在第一個選項卡上，它按預期工作 - 檢查它將顯示選中的圖像。當某人選擇另一個選項卡時，它將隱藏當前活動選項卡的內容，並顯示所選選項卡的內容。然而，其他選項卡中的任何複選框最終會檢查第一個選項卡中的框，我可以看到是否重新點擊第一個選項卡。然而，我實際上點擊過的其他選項卡中的複選框未被選中。
我試着非常明確地針對CSS，不管多長時間或具體我做選擇器，我無法得到：檢查規則適用。其他一切正常 - 我可以刪除這些樣式，並對其他選項卡中的複選框執行其他操作。只是無法獲得：檢查狀態適用。有誰知道我做錯了什麼？下面是例如一些代碼：
HTML - 第一個選項卡的清單，包括複選框的部分
<div id="active_deals" class="">
<div class="sector_filters_wrapper">
<ul class="sector_filters1">
<li>
<input type="checkbox" id="commerce" name="commerce" />
<label for="commerce"><span></span>Commerce & Industry</label>
</li>
<li>
<input type="checkbox" id="consumergoods" name="consumergoods" />
<label for="consumergoods"><span></span>Consumer Goods</label>
</li>
<li>
<input type="checkbox" id="energy" name="energy" />
<label for="energy"><span></span>Energy</label>
</li>
<li>
<input type="checkbox" id="financial" name="financial" />
<label for="financial"><span></span>Financial</label>
</li>
</ul>
<ul class="sector_icons1">
<li>
<img align="center" src="images/sector/commerceicon.png" />
</li>
<li>
<img align="center" src="images/sector/consumergoodsicon.png" />
</li>
<li>
<img align="center" src="images/sector/energyicon.png" />
</li>
<li>
<img align="center" src="images/sector/financialicon.png" />
</li>
</ul>
<ul class="sector_filters2">
<li>
<input type="checkbox" id="healthcare" name="healthcare" />
<label for="healthcare"><span></span>Healthcare</label>
</li>
<li>
<input type="checkbox" id="materials" name="materials" />
<label for="materials"><span></span>Materials</label>
</li>
<li>
<input type="checkbox" id="services" name="services" />
<label for="services"><span></span>Services</label>
</li>
<li>
<input type="checkbox" id="technology" name="technology" />
<label for="technology"><span></span>Technology</label>
</li>
</ul>
<!-- The code continues to close out the div, etc.. -->
HTML的第二個選項卡
<div id="all_deals" class="">
<div class="sector_filters_wrapper">
<ul class="sector_filters1">
<li>
<input type="checkbox" id="commerce" name="commerce" />
<label for="commerce"><span></span>Commerce & Industry</label>
</li>
<li>
<input type="checkbox" id="consumergoods" name="consumergoods" />
<label for="consumergoods"><span></span>Consumer Goods</label>
</li>
<li>
<input type="checkbox" id="energy" name="energy" />
<label for="energy"><span></span>Energy</label>
</li>
<li>
<input type="checkbox" id="financial" name="financial" />
<label for="financial"><span></span>Financial</label>
</li>
</ul>
<ul class="sector_icons1">
<li>
<img align="center" src="images/sector/commerceicon.png" />
</li>
<li>
<img align="center" src="images/sector/consumergoodsicon.png" />
</li>
<li>
<img align="center" src="images/sector/energyicon.png" />
</li>
<li>
<img align="center" src="images/sector/financialicon.png" />
</li>
</ul>
<ul class="sector_filters2">
<li>
<input type="checkbox" id="healthcare" name="healthcare" />
<label for="healthcare"><span></span>Healthcare</label>
</li>
<li>
<input type="checkbox" id="materials" name="materials" />
<label for="materials"><span></span>Materials</label>
</li>
<li>
<input type="checkbox" id="services" name="services" />
<label for="services"><span></span>Services</label>
</li>
<li>
<input type="checkbox" id="technology" name="technology" />
<label for="technology"><span></span>Technology</label>
</li>
</ul>
<!-- this code also continues, similarly to the first one -->
CSS
#active_deals .sector_filters1 input[type="checkbox"], #active_deals .sector_filters2 input[type="checkbox"] {
display:none;
}
#active_deals .sector_filters1 input[type="checkbox"] + label span, #active_deals .sector_filters2 input[type="checkbox"] + label span {
display:inline-block;
width:6px;
height:6px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url('../images/check_radio_sheet.png') left top no-repeat;
cursor:pointer;
margin-right:12px;
}
#active_deals .sector_filters1 input[type="checkbox"]:checked + label span, #active_deals .sector_filters2 input[type="checkbox"]:checked + label span {
background:url('../images/check_radio_sheet.png') -10px top no-repeat;
}
#active_deals .sector_filters1 li label input[type="checkbox"], #active_deals .sector_filters2 li label input[type="checkbox"] {
display:inline-block;
width:6px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url('../images/check_radio_sheet.png') left top no-repeat;
cursor:pointer;
margin-right:12px;
}
#active_deals .sector_filters1 li label input[type="checkbox"]:checked, #active_deals .sector_filters2 li label input[type="checkbox"]:checked {
background:url('../images/check_radio_sheet.png') -10px top no-repeat;
}
#all_deals .sector_filters1 input[type="checkbox"], #all_deals .sector_filters2 input[type="checkbox"] {
display:none;
}
#all_deals .sector_filters1 input[type="checkbox"] + label span, #all_deals .sector_filters2 input[type="checkbox"] + label span {
display:inline-block;
width:6px;
height:6px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url('../images/check_radio_sheet.png') left top no-repeat;
cursor:pointer;
margin-right:12px;
}
#all_deals .sector_filters1 input[type="checkbox"]:checked + label span, #all_deals .sector_filters2 input[type="checkbox"]:checked + label span {
background:url('../images/check_radio_sheet.png') -10px top no-repeat;
}
#all_deals .sector_filters1 li label input[type="checkbox"], #all_deals .sector_filters2 li label input[type="checkbox"] {
display:inline-block;
width:6px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url('../images/check_radio_sheet.png') left top no-repeat;
cursor:pointer;
margin-right:12px;
}
#all_deals .sector_filters1 li label input[type="checkbox"]:checked, #all_deals .sector_filters2 li label input[type="checkbox"]:checked {
background:url('../images/check_radio_sheet.png') -10px top no-repeat;
}
我迷路了與我做錯了什麼，任何人可以提供幫助將不勝感激。
您能設置一個帶有[最小化，完整，可驗證的示例]的JSFiddle（http://stackoverflow.com/help/mcve）嗎？ – 2014-10-09 23:38:23