使用 jQuery 时页面重新加载？

Question

所以我目前正在尝试对我的页面进行编码，以允许隐藏的 div 显示基于按下的按钮。我知道我的代码有效，按下的第一个按钮显示隐藏的 div。但是当我按下第二个按钮时，它会立即显示，然后重新加载页面。我不希望它重新加载。

 <script>
        $(document).ready(function () {
            $(".button1").click(function () {
                $(".new-post-mid").css("display", "block");
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $(".button2").click(function () {
                $(".new-post-mid2").css("display", "block");
            });
        });
    </script>
    </div> <!-- navbar -->
    <div class="new-post-outer">
        <div class="new-post-outish">
            <button class="button1">Edit your account details</button>
            <li> Fields marked with an asterisk (*) are required.</li>
        </div>
        <div class="new-post-mid">
            <form class="abc">
                <label> Please enter your password to change your settings.</label>
                <label> Password: </label>
                <label> Repeat Password: </label>
                <label> Please complete the captcha: </label>
                <button class="button2">Submit</button>
            </form>
        </div>
        <div class="new-post-mid2">
            <form class=abc>
                <label> Username: (*) </label>
                <label> Email Address: (*) </label>
                <label> First Name: </label>
                <label> Last Name: </label>
            </form>
        </div>
    </div><!-- new-post-outer-->

Answer 1

只需使用 e.preventDefault() 或如@Tyler Roper 在评论中所述，您只需将按钮更改为 <input type="button ... />"

您遇到的问题是由处理表单提交操作的按钮控件引起的。

   ...
   $(document).ready(function () {
        $(".button2").click(function (e) {
            e.preventDefault()
            $(".new-post-mid2").css("display", "block");
        });
    });
    ...

使用 jQuery 时页面重新加载？

Page reloading when using jQuery?

jquery

reload