如何解决使用CSS没有JavaScript使用引导按钮组切换类似剧透的内容
我希望有一个Bootstrap可切换按钮组而不是水平单选按钮，以在不使用JavaScript的情况下显示/隐藏相关内容。
从本质上讲，它将变成由3-4个问题组成的形式，最终将显示正确的答案/按钮（将有4个答案可供选择）。
如何在CSS中实现此目标？
#immigrant:checked~.conditional,#required-2:checked~.conditional #option-2:checked~.conditional {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.control:not(:checked)~.conditional,#immigrant:not(:checked)~.conditional,#required-2:not(:checked)~.conditional,#option-2:not(:checked)~.conditional {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form action="">
<label class="btn btn-primary" for="citizen">
<input type="radio" name="residency" value="Citizen" id="citizen"> Citizen</label>
<p class="conditional">Test Paragraph for Citizens - *Needs to be hidden*</p>
<input type="radio" name="residency" value="Immigrant" id="immigrant">
<label class="btn btn-primary" for="immigrant">Immigrants</label>
<p class="conditional">Test Paragraph for Immigrants</p>
</form>https://jsfiddle.net/yqpudt31/1/
解决方法
该标记的工作方式与您为另一个复选框提供的标记不同。您实际上必须将<p>放在<label>内，以便它成为checkbox的同胞，以便应用样式。
这是我能得到的最接近的。这有点hacky，但是有效。我想知道为什么在元素上使用所有这些属性来隐藏和显示它们。您只需要display: none和display: block即可切换它们。
.control:checked~.conditional,#immigrant:checked~.conditional,#required-2:checked~.conditional,#option-2:checked~.conditional {
display: block;
}
#citizen:checked~.conditional {
position: absolute;
left: 0px;
top: 46px;
color: #000000;
}
.control:not(:checked)~.conditional,#immigrant:not(:checked)~.conditional,#required-2:not(:checked)~.conditional,#option-2:not(:checked)~.conditional,#citizen:not(:checked)~.conditional {
display: none;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<form action="">
<label class="btn btn-primary" for="citizen">
<input type="radio" name="residency" value="Citizen" id="citizen"> Citizen
<p class="conditional">Test Paragraph for Citizens - *Needs to be hidden*</p>
</label>
<input type="radio" name="residency" value="Immigrant" id="immigrant">
<label class="btn btn-primary" for="immigrant">Immigrants</label>
<p class="conditional">Test Paragraph for Immigrants</p>
</form>
</body>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。