Question

我试图这样做，当点击一个按钮时，div的内容被更改，但是当我点击按钮时，它需要两次点击才能实现。点击一下后页面似乎刷新，所以这里似乎有一些问题。

＆＃13;

<script>
    function toggleDisplay (toBlock, toNone) {
        document.getElementById(toBlock).style.display = 'block';
        document.getElementById(toNone).style.display = 'none';
    }
</script>
    
<form method="get" id="1" onclick="toggleDisplay('OptIn', '1')" action="#">
    <h2>HEADLINE</h2>
    <div>
        <input type="submit" name="submit" value="Click To Change Content">
    </div>
</form>
        
<div id="OptIn" style="display:none;">
    <h2>HEADLINE</h2>
    <div>
        FORM HERE
    </div>
    <div>

＆＃13;

Answer 1

试

<form method="get" id="1" onclick="toggleDisplay('OptIn', '1'); return false;" action="#">

我想你要关闭最后一个div标签

Answer 2

您是否有理由使用表单和提交按钮来更改dom？如果没有，以下将更适合您的需求。如果您需要表格，我们可能需要了解更多信息才能提供帮助：

＆＃13;

function toggleDisplay (toBlock, toNone) {
document.getElementById(toBlock).style.display = 'block';
document.getElementById(toNone).style.display = 'none';
}

＆＃13;

<div id="1" >
<h2>HEADLINE</h2>
<div>
<input type="button" name="submit" value="Click To Change Content" onclick="toggleDisplay('OptIn', '1')">
</div>
</div>

<div id="OptIn" style="display:none;">
<h2>HEADLINE</h2>
<div>
FORM HERE
</div>
<div>

＆＃13;

或者使用jQuery：

＆＃13;

$(function() {
  $('#btn').click(function(){
   $('.switch').toggle();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch" >
<h2>HEADLINE</h2>
<div>
<input type="button" name="submit" value="Click To Change Content" id="btn">
</div>
</div>

<div class="switch" style="display:none;">
<h2>HEADLINE</h2>
<div>
FORM HERE
</div>
<div>

＆＃13;

函数toggleDisplay仅在两次单击后显示

2 个答案: