【发布时间】：2019-09-30 06:00:10
【问题描述】：
我和我的同事在一个包含常见问题解答页面的网站上工作。每个问题之后，都有一个“回答”（Antwoord）扰流板按钮。单击该按钮会在当前问题下方和下一个问题上方显示答案。再次单击该按钮将隐藏答案。这样可以轻松滚动浏览所有问题的列表并找到您可能感兴趣的问题。
现在我面临的问题是我想从问题 1 的答案中链接到例如问题 5 的答案。
我可以为包含问题 5 的 <div> 提供一个 id= 属性以链接到该问题，但理想情况下，我想通过使超链接“单击”答案按钮来立即显示答案。
事实证明，我需要修改复选框 hack 才能使其正常工作，但我面临的问题是我不能在一段文本上同时拥有超链接和标签。
明确一点：我正在寻找使用仅 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 适应我的情况。
【问题讨论】：
-
您已经在
onclick属性中使用 JavaScript。属性中的那一行行吗？另外，您想点击一个超链接并打开另一个答案？ -
@Aaron3219，好吧，我猜是这样，看到这是我们目前使用的并且它有效。用你知之甚少的语言做某事，赞！
-
我的第二个问题呢？我没听错吗？
-
如果我点击 go to answer 5（在我 Q 的最后一个 sn-p 中），我希望屏幕的焦点在问题 5 上，并且答案立即可见。
-
@Luuklag 我更新了我的答案，您可以找到
CSS和jQuery这两个选项的工作示例。谢谢
标签： html css button hyperlink show-hide