显示/隐藏问题

Show/hide issue

本文关键字：问题 隐藏 显示      更新时间：2023-09-26
    <script>
    function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
    }
    </script>
    <style>
    .hidden { display: none; }
    .unhidden { display: block; }
    </style>
    <div class="answerswers">
        <ol>
            <li>
                <input type="radio" name="q1" id="q1-a" onclick="unhide('answerq1a')"/>John
            </li>
            <li>
                <input type="radio" name="q1" id="q1-b" onclick="unhide('answerq1b')"/>Paula
            </li>
            <li>
                <input type="radio" name="q1" id="q1-c" onclick="unhide('answerq1c')"/>Henal
            </li>
            <li>
                <input type="radio" name="q1" id="q1-d" onclick="unhide('answerq1d')"/>Malc
            </li>
        </ol>
    </div>
    <div id="answerswerq1a" class="hidden">
    <textarea class="widthninetyfivepercent" rows="4" name="optionA" id="1-A" maxlength="300" value=""/>Your answer is correct, John is 20.</textarea>
    </div>

这工作正常，但唯一的问题是，我正在使用单选按钮，我想单击一下即可显示我的div(确实如此(，但是当单击另一个单选按钮时，我希望它隐藏所有其他未隐藏的div，并且一次只显示一个。

我怎样才能以最简单的方式做到这一点？

您可能会发现有些东西是以奇怪的方式编写的，但那是因为我需要使用 CMS 对其进行编辑，并且它只会以特定的方式拾取它。这也是我使用这个特定的显示/隐藏的原因。它很短，它适用于我编写所有内容的方式。

问候

约翰·瓦斯。

无需更改您的 html 或代码 演示

<input type="radio" name="q1" id="q1-a" onclick="unhide(this)" />
<input type="radio" name="q1" id="q1-b" onclick="unhide(this)" />
<input type="radio" name="q1" id="q1-c" onclick="unhide(this)" />
<input type="radio" name="q1" id="q1-d" onclick="unhide(this)" />

用

var currentShown = "";
function unhide(rad) {
  var id = "answerswer"+rad.id.replace("-",""); 
  var answer = document.getElementById(id);
  if (answer) {
    var current = document.getElementById(currentShown);
    if (current) current.className="hidden";
    currentShown=id;
    answer.className="unhidden";
  }
}
相关文章：