jquery - 如何防止页面重新加载

Question

当我点击登录按钮时，页面正在重新加载，因此它显示了我在 jquery 中编写的隐藏内容。所以我写了防止默认功能，即使它不起作用。那么你能帮我解决这个问题吗？

      $('.tab a').on('click', function (e) {
                        e.preventDefault();
                        $(this).parent().addClass('active');
                        $(this).parent().siblings().removeClass('active');
                        target = $(this).attr('href');
                        $('.tab-content > div').not(target).hide();
                        $(target).fadeIn(600);
                    });

            
                    $(document).ready(function () {
                        $("#otp").hide();
                        $("#setpswd").hide();
                        $(".cancel").hide();
                        $("#submit").hide();
                        $(".login").show();
                        $(".forgot").click(function (evt) {
                             evt.preventDefault();
                             return false();
                            $("#otp").show();
                            $("#setpswd").show();
                            $("#pswd").hide();
                            $(".cancel").show();
                            $(".forgot").hide();
                            $("#submit").show();
                            $(".login").hide();
                        });
                    });
                   

.form { 
        border-top: 4px solid #0689b2;
        background: #45bacc;
        padding: 30px;
        max-width: 400px;
        margin: 40px auto;
        border-radius: 4px;
        /*box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);*/
    }
    .box-shadow{
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        padding: 7%; 
        background: rgba(6, 137, 178, 0.68);
    }
    .tab-group {
        list-style: none;
        padding: 0;
        margin: 0 0 40px 0;
    }
    .tab-group:after {
        content: "";
        display: table;
        clear: both;
    }
    .tab-group li a {
        display: block;
        text-decoration: none;
        padding: 5px;
        background: #0689b2;
        color: #ffffff;
        font-size: 20px;
        float: left;
        width: 50%;
        text-align: center;
        cursor: pointer;
        /*  -webkit-transition: .5s ease;
        */transition: .5s ease;
    }
    .tab-content > #signup:last-child {
        display: none;
    }
    .tab-group .active a, .tab-group .active a:hover{
        background: #ffffff;
        color: #0689b2;
    }
    input, textarea {
        display: block;
        width: 100%;
        /*    height: 100%;*/
        padding: 6px 0px 6px 9px;
        background-image: none;
        border-radius: 0;
    }
    input:focus, textarea:focus {
        outline: 0;

    }

    textarea {
        border: 2px solid #a0b3b0;
        resize: vertical;
    }
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color:#0689b2;
        position:relative;
        left:10px;
    }
    ::-moz-placeholder { /* Firefox 19+ */
        color:#0689b2;
        position:relative;
        left:10px;
    }
    :-ms-input-placeholder { /* IE 10+ */
        color:#0689b2;
        position:relative;
        left:10px;
    }
    :-moz-placeholder { /* Firefox 18- */
        color: #fff;
        position:relative;
        left:10px;
    }
    .field-wrap {
        position: relative;
        margin-bottom: 25px;
    }

    .choose-option h4{
        display:inline;
        color: #fff;
        font-weight:800;
    }
    .choose-option {
        margin:0 0 25px 0;
    }
    .choose-option .radio-inline{
        color: #fff;
    }
    .radio-inline input[type=radio] {
        margin: 4px 0 0 34%;
    }
    .top-row:after {
        content: "";
        display: table;
        clear: both;
    }
    .top-row > div {
        float: left;
        width: 48%;
        margin-right: 4%;
    }
    .top-row > div:last-child {
        margin: 0;
    }

    .login-btn {
        border: 0;
        outline: none;
        border-radius: 0;
        padding: 5px;
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        background: #0689b2;
        color: #FFF;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        -webkit-appearance: none;
    }
    .login-btn:hover, .login-btn:focus {
        background: #f5f5f5;
        color: #0689b2;
    }

    .button-block {
        /*display: block;*/
        width: 100%;
    }

    .forgot{
        margin: -15px 0px 5px 0;
        text-align: right;
    }
    .forgot a, .cancel a{
        color:#fff;
    }
    .cancel{
        text-align: center;
        margin: 3% 0 0 0;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
                <div class="box-shadow">
                    <ul class="tab-group">
                        <li class="tab active"><a href="#login">Log In</a></li>
                        <li class="tab"><a href="#signup">Sign Up</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="login">   
                            <form action="#" method="post">
                                <div class="field-wrap">
                                    <input type="email" placeholder=" Email Address" />
                                </div>

                                <div class="field-wrap" id="pswd">
                                    <input type="password" placeholder=" Password" />
                                </div>

                                <p class="forgot"><a href="#">Forgot Password?</a></p>
                                <div class="field-wrap" id="otp">
                                    <input type="text" placeholder="Enter OTP" />
                                </div> 
                                <div class="field-wrap" id="setpswd">
                                    <input type="password" placeholder="Set Password" />
                                </div>
                              <input type="submit" class="login-btn button-block" id="submit" value="Submit">
                                <p class="cancel"><a href="<?php echo base_url(); ?>index.php/welcome/login">Cancel</a></p>
                                <input  type="submit" class="login-btn button-block login" value="Login">
                            </form>
                        </div>

                        <div id="signup">   
                            <form action="#" method="post">
                                <div class="top-row">
                                    <div class="field-wrap">
                                        <input type="text" placeholder="First Name"/>
                                    </div>

                                    <div class="field-wrap">
                                        <input type="text" placeholder="Last Name" />
                                    </div>
                                </div>

                                <div class="field-wrap">
                                    <input type="email"placeholder="Email" />
                                </div>

                                <div class="field-wrap">
                                    <input type="text"placeholder="Mobile Number"/>
                                </div>
                                <div class="choose-option">
                                    <h4>I am<i class="fa fa-angle-right"></i></h4>
                                    <label class="radio-inline">
                                        <input type="radio" name="optradio">Buyer
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="optradio">Supplier
                                    </label>
                                </div>
                                <div class="field-wrap">
                                    <input type="password"placeholder="Password"/>
                                </div>

                                <div class="field-wrap">
                                    <input type="password"placeholder="Re-enter Password"/>
                                </div>

                                <input type="submit" class="login-btn button-block" value="Sign Up">

                            </form>

                        </div>

                    </div>
                </div>
            </div>

Answer 1

试试这个。

$('form').submit( function(e) {
  e.preventDefault();
});

请记住将此代码放在准备好的函数中。