我和我的同事在一个包含“常见问题”页面的网站上工作。每个问题之后，都有一个“ Answer”（Antwoord）扰流器按钮。单击按钮将在当前问题下方和下一个问题上方显示答案。再次单击按钮将隐藏答案。这样可以轻松滚动浏览所有问题的列表，找到您可能感兴趣的问题。
现在我面临的问题是我想从问题1的答案链接到问题5的答案。
我可以给包含问题5的<div>一个id=属性以链接到该属性，但是理想情况下，我想通过使超链接“单击”“答案”按钮来立即显示答案。
事实证明，为了使其能够正常工作，我将需要修改复选框hack，但是我面临的问题是我不能在一条文本上同时拥有Hyperlink和Label。
请明确：我正在寻找仅使用 HTML / CSS的解决方案。
只有一个扰流按钮的原始代码
.spoilerbutton {
display: block;
border: none;
padding: 0px 0px;
margin: 10px 0px;
font-size: 150%;
font-weight: bold;
color: #000000;
background-color: transparent;
outline: 0;
}
.spoiler {
overflow: hidden;
}
.spoiler>div {
-webkit-transition: all 0s ease;
-moz-transition: margin 0s ease;
-o-transition: all 0s ease;
transition: margin 0s ease;
}
.spoilerbutton[value="Antwoord"]+.spoiler>div {
margin-top: -500%;
}
.spoilerbutton[value="Hide Antwoord"]+.spoiler {
padding: 5px;
}<strong>1. Question 1?</strong> <input class="spoilerbutton" onclick="this.value=this.value=='Antwoord'?'Verberg':'Antwoord';" type="button" value="Antwoord" />
<div class="spoiler">
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
尝试从以下位置实施解决方案： Can I have an onclick effect in CSS?
我得到以下不起作用的信息：
#btnControll1 {
display: none;
}
.spoilerbutton {
display: block;
border: none;
padding: 0px 0px;
margin: 10px 0px;
font-size: 150%;
font-weight: bold;
color: #000000;
background-color: transparent;
outline: 0;
}
.spoiler {
overflow: hidden;
}
.spoiler>div {
-webkit-transition: all 0s ease;
-moz-transition: margin 0s ease;
-o-transition: all 0s ease;
transition: margin 0s ease;
}
#btnControl1:checked + label {
margin-top; -500%
}<strong>1. Question 1?</strong> <input type"chekbox" id="btnControl1" />
<label class="spoilerbutton" for="btnControl1">Antwoord</label>
<div class="spoiler">
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
使用<label>和<a href> 的组合（同样不起作用）
.spoilerbutton {
display: none;
}
.spoiler {
overflow: hidden;
height:2em;
}
.spoiler>div {
-webkit-transition: all 0s ease;
-moz-transition: margin 0s ease;
-o-transition: all 0s ease;
transition: margin 0s ease;
}
.spoilerbutton+.spoiler>div {
margin-top: -500%;
}
.spoilerbutton+.spoiler>label:before {
content: 'Antwoord';
font-size: 150%;
font-weight: bold;
color: #000000;
}
.spoilerbutton:checked+.spoiler>label:before {
content: 'Verberg';
}
.spoilerbutton:checked+.spoiler {
height:auto;
}
.spoilerbutton:checked+.spoiler>div {
margin-top: 0;
}<strong>1. Question 1?</strong> <input type="checkbox" id="question1" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question1"></label>
<div>
<ul>
<li><a href="#question5"><label for="#answer5">Open 5. link first</label></a></li>
<li><label for="question5"><a href="#answer5">Open 5. label first</a></label></li>
<li><a href="#answer5">Open 5. link only</a></li>
</ul>
</div>
</div>
<strong>2. Question 2?</strong> <input type="checkbox" id="question2" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question2"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<strong>2. Question 3?</strong> <input type="checkbox" id="question3" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question3"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<strong>2. Question 4?</strong> <input type="checkbox" id="question4" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question4"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<br>
<br>
<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<strong>2. Question 5?</strong> <input type="checkbox" id="question5" value="checked" class="spoilerbutton">
<div class="spoiler" id="answer5">
<label for="question5"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
也相关 How to toggle a checkbox when a link is clicked?
那里有一些很棒的建议，但是我无法根据自己的情况来适应answer from Tushar。
答案 0 :(得分：8)
选项1-使用JavaScript
重定向仅在元素可见而不设置为display: none的情况下有效。在上述代码段中，复选框和答案列表均设置为display: none作为其初始状态。
步骤1：
将id添加到每个<strong id="question">元素。
<strong id="question1">1. Question 1?</strong>
步骤2： 我们无法使用CSS 选中/取消选中复选框，我们必须使用 JavaScript / jQuery 来实现此功能。因此，当用户单击链接时，我将基础知识添加到了一个复选框选中中。
<li><a href="#question5" onClick="var str = this.attributes['href'].value + 'Checkbox'; document.getElementById(str.replace('#', '')).checked = true;">Open 5. link first</a></li>
.spoilerbutton {
display: none;
}
.spoiler {
overflow: hidden;
height:2em;
}
.spoiler>div {
-webkit-transition: all 0s ease;
-moz-transition: margin 0s ease;
-o-transition: all 0s ease;
transition: margin 0s ease;
}
.spoilerbutton+.spoiler>div {
margin-top: -500%;
}
.spoilerbutton+.spoiler label:before {
content: 'Antwoord';
font-size: 150%;
font-weight: bold;
color: #000000;
}
.spoilerbutton:checked+.spoiler label:before {
content: 'Verberg';
}
.spoilerbutton:checked+.spoiler {
height:auto;
}
.spoilerbutton:checked+.spoiler>div {
margin-top: 0;
}<strong id="question1">1. Question 1?</strong>
<input type="checkbox" id="question1Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question1Checkbox"></label>
<div>
<ul>
<li><a href="#question5" onClick="var str = this.attributes['href'].value + 'Checkbox'; document.getElementById(str.replace('#', '')).checked = true;">Open 5. link first</a></li>
</ul>
</div>
</div>
<strong id="question2">2. Question 2?</strong>
<input type="checkbox" id="question2Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question2Checkbox"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<strong id="question3">2. Question 3?</strong>
<input type="checkbox" id="question3Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question3Checkbox"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<strong id="question4">2. Question 4?</strong>
<input type="checkbox" id="question4Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question4Checkbox"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<br>
<br>
<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<strong id="question5">2. Question 5?</strong>
<input type="checkbox" id="question5Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler" id="answer5">
<label for="question5Checkbox"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
选项2-使用CSS
通过使用CSS :target选择器和少许结构更新，我们可以使用CSS来实现功能。
.spoilerbutton {
display: none;
}
.spoiler {
overflow: hidden;
height:2em;
}
.spoiler>div {
-webkit-transition: all 0s ease;
-moz-transition: margin 0s ease;
-o-transition: all 0s ease;
transition: margin 0s ease;
}
.spoilerbutton+.spoiler .listOfAnswer {
margin-top: -500%;
}
.spoilerbutton+.spoiler .labelWrap {
display: inline-block;
position: relative;
}
.spoilerbutton+.spoiler .labelWrap label:before {
content: 'Antwoord';
font-size: 150%;
font-weight: bold;
color: #000000;
}
.spoilerbutton:checked+.spoiler .labelWrap label:before {
content: 'Verberg';
}
.spoilerbutton:checked+.spoiler {
height:auto;
}
.spoilerbutton:checked+.spoiler .listOfAnswer {
margin-top: 0;
}
:target + .spoilerbutton + .spoiler {
height:auto;
}
:target + .spoilerbutton + .spoiler .labelWrap label:before {
content: 'Verberg';
}
:target + .spoilerbutton + .spoiler .labelWrap .resetTarget {
cursor: default;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
:target + .spoilerbutton + .spoiler .listOfAnswer {
margin-top: 0;
}
.resetTarget {
display: none;
}<strong class="qTitle" id="question1">1. Question 1?</strong>
<input type="checkbox" id="question1Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
<div class="labelWrap">
<label for="question1Checkbox"></label>
<a class="resetTarget" href="#question1Checkbox"></a>
</div>
<div class="listOfAnswer">
<ul>
<li><a href="#question5">Open 5. link first</a></li>
</ul>
</div>
</div>
<strong class="qTitle" id="question2">2. Question 2?</strong>
<input type="checkbox" id="question2Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
<div class="labelWrap">
<label for="question2Checkbox"></label>
<a class="resetTarget" href="#question2Checkbox"></a>
</div>
<div class="listOfAnswer">
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<strong class="qTitle" id="question3">2. Question 3?</strong>
<input type="checkbox" id="question3Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
<div class="labelWrap">
<label for="question3Checkbox"></label>
<a class="resetTarget" href="#question3Checkbox"></a>
</div>
<div class="listOfAnswer">
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<strong class="qTitle" id="question4">2. Question 4?</strong>
<input type="checkbox" id="question4Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler">
<div class="labelWrap">
<label for="question4Checkbox"></label>
<a class="resetTarget" href="#question4Checkbox"></a>
</div>
<div class="listOfAnswer">
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<br>
<br>
<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<strong class="qTitle" id="question5">2. Question 5?</strong>
<input type="checkbox" id="question5Checkbox" value="checked" class="spoilerbutton">
<div class="spoiler" id="answer5">
<div class="labelWrap">
<label for="question5Checkbox">
<a class="resetTarget" href="#question5Checkbox"></a>
</label>
</div>
<div class="listOfAnswer">
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
答案 1 :(得分：5)
通常，是的，可以做到这一点，但是由于CSS（级联样式工作表）的局限性而存在巨大的局限性，因此实际上答案是否。
我们面临的问题是，如果没有任何JavaScript，您将无法动态地实现解决方案。您可以在可能链接的answer中看到它。在纯CSS中，只能定位文件中指定的元素。如果您单击链接，CSS如何知道要检查哪个checkbox（假设使用checkbox hack）或扩展哪个答案？答案很简单：不能。
因此，没有JavaScript的唯一方法就是不动态地执行它。 问题是您无法定位父元素（级联样式表），因此，例如，{{ 1}}，并且您也无法使用CSS选中/取消选中复选框。
这将我们带到JavaScript作为您代码结构的唯一可能解决方案。
:focus.spoilerbutton {
position: absolute;
margin-top: 9px 0 0 -5px;
height: 35px;
width: 102px;
opacity: 0;
}
.spoilerbutton:checked {
width: 86px;
}
.spoilerbutton~.text::after {
content: "Antwoord";
}
.spoilerbutton:checked~.text::after {
content: "Verberg";
}
.spoilerbutton~.spoiler {
display: none;
}
.spoilerbutton:checked~.spoiler {
padding: 5px;
display: block;
}
只需一行代码即可：
<div>
<strong>1. Question 1?</strong>
<p class="text"></p>
<input class="spoilerbutton" type="checkbox" />
<h2 class="text"></h2>
<div class="spoiler">
<div>
<ul>
<li><a onclick="document.querySelector(this.attributes['href'].value + ' .spoilerbutton').checked = true;" href="#answer3">Open answer 3</a></li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
</div>
<div>
<strong>1. Question 2?</strong>
<p class="text"></p>
<input class="spoilerbutton" type="checkbox" />
<h2 class="text"></h2>
<div class="spoiler">
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
</div>
<div style="margin-top: 500px" id="answer3">
<strong>1. Question 3?</strong>
<p class="text"></p>
<input class="spoilerbutton" type="checkbox" />
<h2 class="text"></h2>
<div class="spoiler">
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
</div>实际上，我忘记了document.querySelector(this.attributes['href'].value + ' .spoilerbutton').checked = true;
伪类。但是Hassan Siddiqui已经完成his answer了。但是，您将不得不重组代码，并且如果您想使用JavaScript方法（强烈建议使用），则我希望使用我的代码行。
答案 2 :(得分：1)
以下演示是纯HTML / CSS －一点点JavaScript。其中包括事件中的属性，许多人忽略了这些属性，却没有意识到它们是JavaScript。这是两个示例：
<buttononclick =“ jsFunction（this）;返回false”>X</button>
<a href="#/"onclick =“ this.value = this.value =='Antwoord'？'Verberg'：'Antwoord';”>X</a>
每个问与答是一个隐藏的复选框，一个折叠的字段集，包含可见的图例和标签，以及定义列表作为隐藏的内容。 visibility: collapse/visible用于该部分。
当跳转到目标字段集时，我们使用:target打开它。所有用户交互和动画工作（甚至使用scroll-behavior: smooth进行滚动操作）都仅以类为中心的CSS和策略性HTML布局完成。使用大量<br>或使用任何JavaScript都不会做出妥协。 CSS中唯一使用的#id是非必需规则集，因此只要您坚持使用布局模式，并且类分配扩展就可以轻松完成。
更新
哈桑·西迪基（HassanSiddiqui）向我提出了一个边缘案例的意图，请参阅下面的评论。我说的是极端情况，因为我看不到用户完全呆在FAQ上，以至于他们需要回去使用该特定链接。尽管如此，为了完整起见，我对其进行了以下更新：
问题5的label.tgr最初是display:none。
这里是a.tgr的位置，它针对问题＃5的复选框input#act5。
现在备份到问题＃1中的链接，并让我们回想一下那里发生的情况：单击该链接时，fieldset#t5c2永远存在:target，这使得自{{1 }}未选中。
因此input#act5由链接打开，现在为#t5c2。要从:target中删除该状态，请点击#t5c2，使a.tgr。
因此，此时input#act5:target将被a.tgr取代，并且label.tgr将被关闭。我不会迷惑自己的更多细节，所以只需回顾一下CSS。
以全页模式查看演示，最初的紧凑模式下代码段的iframe严重不成比例。
#t5c2html {
scroll-behavior: smooth;
}
.main {
height: 300vh;
padding: 2vh 2vw 30vh;
}
.set {
overflow: hidden;
visibility: collapse;
margin: 2vh 0;
}
.cat {
max-height: 0;
font-size: 0;
opacity: 0;
}
:target .cat,
.act:checked+.set .cat {
max-height: 100vh;
font-size: 1rem;
opacity: 1.0;
transition: opacity 1s, max-height 0.7s;
}
:target,
.act:checked+.set {
max-height: 100vh;
visibility: visible;
transition: 0.7s
}
.que,
.tgr {
visibility: visible;
max-height: 50vh;
color: #000;
font-size: 1rem;
text-decoration: none;
}
.tgr {
cursor: pointer;
}
.que::before {
content: attr(data-idx)'. ';
}
.lnx::after {
content: ' 'attr(title);
}
/* Question 5 Switch Triggers */
#act1:checked~.set .top {
outline: 3px solid cyan
}
#act5:target+#t5c2 {
visibility: collapse;
}
#act5:checked+#t5c2 {
visibility: visible;
}
#t5c2 label.tgr {
display: none;
}
#act5:target+#t5c2 label {
display: inline-block;
}
#act5:target+#t5c2 a {
display: none;
}
#act1:not(:checked)~#act5:not(:checked)+#t5c2:not(:target) a {
display: none;
}
#act1:not(:checked)~#act5:not(:checked)+#t5c2:not(:target) label {
display: inline-block;
}
答案 3 :(得分：0)
我稍微简化了代码，并创建了一个半工作的纯CSS选项。我无法让它完全按照您的要求运行，但是我认为仍然有人会觉得它有用。
基本上，我使用:focus伪选择器来显示单击按钮时的答案。
我还尝试使用:active选择器来显示另一个答案中的答案。这不是很好，因为:active选择器会在元素不活动时消失。
尽管如此，这是一种可能的解决方案，用于在单击按钮时简单地显示答案。
/* some quick styling */
.question {
font-weight: bold;
margin: 10px 0;
}
.answer {
display: none;
font-size: 14px;
margin: 10px 0;
}
.show-answer {
background: #cceedd;
}
.show-answer:focus {
background: #cdcdcd;
}
a.answer-link {
color: black;
text-decoration: none;
}
a.answer-link span {
color: blue;
text-decoration: underline;
}
/* displaying the answers */
.show-answer:focus + .answer {
display: block;
}
/* linking to an answer */
.answer-link--2:active ~ .answer--2 {
display: block;
}<div class="question">Question 1?</div>
<button class="show-answer show-answer--1">Show Answer</button>
<a class="answer answer--1 answer-link answer-link--2" href="#">This is the answer to Question 1. <span>Clicking and holding this text will open Question 2 answer, until you let go!.</span>.</a>
<hr/>
<div class="question">Question 2?</div>
<button class="show-answer show-answer--2">Show Answer</button>
<div class="answer answer--2">This is the answer to Question 2.</div>
<hr/>
<div class="question">Question 3?</div>
<button class="show-answer show-answer--3">Show Answer</button>
<div class="answer answer--3">This is the answer to Question 3.</div>
<hr/>
<div class="question">Question 4?</div>
<button class="show-answer show-answer--4">Show Answer</button>
<div class="answer answer--4">This is the answer to Question 4.</div>
<hr/>
<div class="question">Question 5?</div>
<button class="show-answer show-answer--5">Show Answer</button>
<div class="answer answer--5">This is the answer to Question 5.</div>
答案 4 :(得分：0)
其他答案说明了在没有JavaScript的情况下解决此问题的缺点。
就语义而言，我建议使用details元素。
要将一个问题链接到另一个问题并同时显示该问题的答案，请使用一个小的脚本以编程方式更新details元素上的[open]属性。
const section = document.getElementById('section');
section.addEventListener('click', (e) => {
const target = e.target;
const isLink = target.classList.contains('link');
if (!isLink) {
return;
}
const href = target.getAttribute('href');
const question = target.closest('section').querySelector(href);
question.setAttribute('open', true);
});body {
height: 2000px;
}
summary {
cursor: pointer;
}<section id="section">
<details id="q1">
<summary>Question 1</summary>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>see the answer to <a class="link" href="#q4">question 4</a></li>
</ul>
</details>
<details id="q2">
<summary>Question 2</summary>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</details>
<details id="q3">
<summary>Question 3</summary>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</details>
<details id="q4">
<summary>Question 4</summary>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</details>
</section>