Question

    <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="answers">
        <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="answerq1a" 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进行编辑，它只会以特定的方式进行编辑。这也是我使用这个特定节目/隐藏的原因。它很简短，它与我写的所有内容一起工作。

问候，

John Vas。

Answer 1

不要更改您的html或代码DEMO

<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 = "answer"+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";
  }
}

显示/隐藏问题

1 个答案: