如何包装按钮在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

回答

相关问题