私はこのソースコードを持っています。いずれかのボタンをクリックした後、タブ間を切り替えるはずです。すべて正常に動作しますが、divのボタンをラップしようとすると作業が止まり、コンテンツが表示されなくなります。私はImは上記のコードが動作している今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>
を立ち往生..私の心に来たすべてのものを試してみましたが、私は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>
どれをこの部分をラップしたいと思いますアイデア?事前