Question

很抱歉提出这个基本的问题，但我有点震惊。我打算让这段代码列出问题直到测试结束。相反，在切换div后，它会因某些未知原因而回复到问题1 = \

请帮助和感谢！

<html>
<head>
<body>
<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
       return;   
    }

    function divswitcher(d1,d2) {
      toggle_visibility(d1);
      toggle_visibility(d2);
      return;
    }
</script>

<div id="q1" style="display: block">
Q1 text
<ul>
<li><input type="radio" name="q1" value="q1a1"/>Q1A1 text</li>
<li><input type="radio" name="q1" value="q1a2"/>Q1A2 text</li>
<li><input type="radio" name="q1" value="q1a3"/>Q1A3 text</li>
<li><input type="radio" name="q1" value="q1a4"/>Q1A4 text</li>
</ul>
<a href="" onclick="divswitcher('q1','q2');" />Next</a>
</div>

<div id="q2" style="display: none">
Q2 text
<form>
<ul>
<li><input type="radio" name="q2" value="q2a1"/>Q2A1 text</li>
<li><input type="radio" name="q2" value="q2a2"/>Q2A2 text</li>
<li><input type="radio" name="q2" value="q2a3"/>Q2A3 text</li>
<li><input type="radio" name="q2" value="q2a4"/>Q2A4 text</li>
</ul>
<a href="" onclick="divswitcher('q2','q3');" />Next</a>
</form>
</div>

<div id="q3" style="display: none">
Q3 text
<form>
<ul>
<li><input type="radio" name="q1" value="q3a1"/>Q3A1 text</li>
<li><input type="radio" name="q1" value="q3a2"/>Q3A2 text</li>
<li><input type="radio" name="q1" value="q3a3"/>Q3A3 text</li>
<li><input type="radio" name="q1" value="q3a4"/>Q3A4 text</li>
</ul>
<a href="" onclick="divswitcher('q3','final');" />Next</a>
</form>
</div>

<div id="final" style="display: none">
Yay!
</div>

</body>
</html>

Answer 1

带有空href的锚重新加载页面，请尝试：

<a href="#" onclick="divswitcher('q3','final');">Next</a>

FIDDLE

您的处理程序中的

或return false或preventDefault

Answer 2

替换您的代码（请注意拼写错误/>，您只能使用/字符来关闭链接）：

<a href="" onclick="divswitcher('q3','final');" />Next</a>

通过

<a href="#" onclick="divswitcher('q3','final');">Next</a>

Answer 3

由于锚标签：当我们点击NEXt时 - 页面重新加载，因此我们又回到了Q1

我建议您使用按钮代替锚标记

<强>更换

<a href="" onclick="divswitcher('q1','q2');" />Next</a>

。通过

<button type="button" onclick="divswitcher('q1','q2');">NEXT</button>

Answer 4

一个错误是您要关闭两个标签并链接到空白的href =“”：

<a href="" onclick="divswitcher('q1','q2');" />Next</a>

更改为

<a onclick="divswitcher('q1','q2');">Next</a>

那应该解决它。如果您将鼠标悬停在标签上时需要漂亮的指针，请添加以下样式：

a{
    cursor:pointer;
}

JS基本隐藏/显示div失败

4 个答案: