Перезагрузка страницы при использовании jQuery?

Question

Итак, я сейчас пытаюсь закодировать свою страницу, чтобы скрытые элементы отображались в зависимости от нажатия кнопок. Я знаю, что мой код работает, первая нажатая кнопка показывает скрытый 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");
        });
    });
    ...