如何包裝按鈕在div之間切換div

我有這個源代碼。它應該在點擊任何按鈕之後在標籤之間切換。一切工作正常，但是當我嘗試在div中包裝按鈕時，它停止工作，它不再顯示內容。我想，就在我心中的一切..即時通訊現在陷入如何包裝按鈕在div之間切換div

.main { 
 
    margin: 0 auto; 
 
    min-width: 320px; 
 
    max-width: 800px; 
 
} 
 

 
.content { 
 
    background: #fff; 
 
    color: #373737; 
 
} 
 

 
.content>div { 
 
    display: none; 
 
    padding: 20px 25px 5px; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    padding: 15px 25px; 
 
    font-weight: 600; 
 
    text-align: center; 
 
} 
 

 
label:hover { 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 

 
input:checked+label { 
 
    background: #ed5a6a; 
 
    color: #fff; 
 
} 
 

 
#tab1:checked~.content #content1, 
 
#tab2:checked~.content #content2, 
 
#tab3:checked~.content #content3, 
 
#tab4:checked~.content #content4 { 
 
    display: block; 
 
}

<div class="main"> 
 
    <input id="tab1" type="radio" name="tabs" checked> 
 
    <label for="tab1">111</label> 
 

 
    <input id="tab2" type="radio" name="tabs"> 
 
    <label for="tab2">222</label> 
 

 
    <input id="tab3" type="radio" name="tabs"> 
 
    <label for="tab3">333</label> 
 

 
    <input id="tab4" type="radio" name="tabs"> 
 
    <label for="tab4">444</label> 
 

 
    <div class="content"> 
 
    <div id="content1"> 
 
     <p> 
 
     111 
 
     </p> 
 
    </div> 
 

 
    <div id="content2"> 
 
     <p> 
 
     222 
 
     </p> 
 
    </div> 
 

 
    <div id="content3"> 
 
     <p> 
 
     333 
 
     </p> 
 
    </div> 
 

 
    <div id="content4"> 
 
     <p> 
 
     444 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

上面的代碼工作，但我想在格

<input id="tab1" type="radio" name="tabs" checked> 
      <label for="tab1">111</label> 

      <input id="tab2" type="radio" name="tabs"> 
      <label for="tab2">222</label> 

      <input id="tab3" type="radio" name="tabs"> 
      <label for="tab3">333</label> 

      <input id="tab4" type="radio" name="tabs"> 
      <label for="tab4">444</label>

任何包裹這部分想法？在此先感謝

來源

2017-09-23 niiii

的問題是，你正在改變文檔結構和這個選擇：

#tab1:checked ~ .content #content1, 
#tab2:checked ~ .content #content2, 
#tab3:checked ~ .content #content3, 
#tab4:checked ~ .content #content4 { 
    display: block; 
}

不再是內容區域相匹配。我想不出一個可行的選擇器，因爲添加新的div可以打破標籤和內容之間的兄弟關係。

但是，如果您放棄隱藏的單選按鈕和標籤，並使用a元素來定位應該顯示的內容區域，則可以添加div並使代碼更簡單。然後可以使用CSS :target pseudo-class來顯示作爲被點擊鏈接的目標的當前內容區域。

此外，目前尚不清楚爲什麼您在的p中有實際內容。這似乎沒有必要。

<!doctype html> 
 
    <html lang="en"> 
 
    <head> 
 
    \t \t <style> 
 
    \t \t .main {margin: 0 auto; min-width: 320px; max-width: 800px;} 
 
    \t \t .content {background: #fff; color: #373737;} 
 
    \t \t .content > div {display: none; padding: 20px 25px 5px;} 
 
    \t \t a {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center;} 
 
    \t \t a:hover {color: #fff; cursor: pointer;} 
 
    \t \t a:link {background: #ed5a6a; color: #fff; text-decoration:none; } 
 
    \t \t .content > :target 
 
    \t \t { 
 
    \t \t display: block; 
 
    \t \t } 
 
    \t \t </style> 
 
    \t </head> 
 
    \t <body> 
 
    \t \t <div class="main"> 
 
      <div id="parent"> 
 
    \t \t  <a href="#content1" id="tab1">111</a> 
 
    \t \t  <a href="#content2" id="tab1">222</a> 
 
      <a href="#content3" id="tab1">333</a> 
 
    \t \t  <a href="#content4" id="tab1">444</a>    
 
         
 
    \t  </div> 
 
    \t \t <div class="content"> 
 
    \t \t \t <div id="content1">111</div> 
 
    \t \t \t <div id="content2">222</div> 
 
    \t \t \t <div id="content3">333</div> 
 
    \t \t \t <div id="content4">444</div> 
 
    \t \t </div> 
 
    \t 
 
    \t \t </div> 
 
    \t </body> 
 
    </html>

來源

2017-09-23 23:37:57

如何包裝按鈕在div之間切換div

回答

相關問題