0

我正在创建一个登录页面，当我单击输入 type="submit" [我是学生] 时，我想通过 slideDown 效果隐藏 div 并通过 slideUp 效果显示另一个 div。我对我的 jQuery 的语法有点自信，但是当我在 localhost/folderName 上尝试它时，有时它可以工作但没有显示效果，有时效果会在眨眼间显示然后恢复正常（就像只刷新这页纸）

这是我的代码。

索引.php：

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>

<body>

<div id="signInDiv">

    <h2 id="signInBanner">Sign In</h2>

    <form method="post">
        <table id="signInTableField">
            <tr><td><input id="signInField" type="text" name="username" placeholder="Username"/></td></tr>
            <tr><td><input id="signInField" type="password" name="password" placeholder="Password"/></td></tr>
            <tr><td><input id="loginButton" type="submit" value="Login" name="login"/></td></tr>
        </table>

        <hr id="horizontalLine">

        <h2 id="signUpBanner">Sign up here!</h2>

        <table id="accessTypeTableButtons">
            <tr>
                <td><input type="submit" value="I'm a Student" class="studentRegisterButton" id="accessTypeButtons" name="studentType"/></td>
                <td><input type="submit" value="I'm an Officer" class="officerRegisterButton" id="accessTypeButtons" name="officerType"/></td>
            </tr>
        </table>
    </form>
</div>

<!--Student Register Div-->

    <div id="studentRegisterDiv">

        <h2 id="studentSignUpBanner">Student Registration</h2>

            <form method="post" action="">
                <table id="registerStudentFields">
                    <tr><td><input id="studentField" type="text" name="firstname" placeholder="First Name"/></td></tr>
                    <tr><td><input id="studentField" type="text" name="lastname" placeholder="Last Name"/></td></tr>
                    <tr><td><input id="studentField" type="text" name="studentnumber" placeholder="Student Number"/></td></tr>
                    <tr><td><input id="studentField" type="text" name="emailaddress" placeholder="Email Address"/></td></tr>
                    <tr><td><input id="studentField" type="text" name="username" placeholder="Username"/></td></tr>
                    <tr><td><input id="studentField" type="password" name="password" placeholder="Password"/></td></tr>
                    <tr><td><input id="studentFieldButton" type="submit" name="submitStudent" value="Submit" />
                        <input id="studentFieldButton" type="submit" name="cncelStudentRegister" value="Cancel" /></td></tr>
                </table>
            </form>
    </div>




</body>
</html>

布局.css：

/*------------Sign In Div------------*/
#signInDiv {
    background: white;
    width: 350px;
    height: 350px;
    position: absolute;
    top: 25%;
    left: 65%;
}

table#signInTableField {
    border-collapse: seperate;
    border-spacing: 10px;
}

#signInBanner {
    position: absolute;
    left: 25px;
    top: 0px;
}

#signInTableField {
    position: absolute;
    left: 25px;
    top: 50px;
    cellspacing: 10px;
}

#signInField {
    width: 275px;
    height: 35px;
    font-size: 20px;
}

#loginButton {
    width: 280px;
    height: 35px;
    font-size: 20px;
}

#horizontalLine {
    position: absolute;
    top: 210px;
    left: 25px;
    width: 300px;
    border: 1px solid white;
}

table#accessTypeTableButtons {
    border-collapse: separate;
    border-spacing: 10px;
}

#accessTypeTableButtons {
    position: absolute;
    top: 260px;
    left: 25px;
}

#signUpBanner {
    position: absolute;
    left: 25px;
    top: 210px;
}

#accessTypeButtons {
    width: 135px;
    height: 35px;
    font-size: 15px;
}

/*------------Student Register Div------------*/

#studentRegisterDiv {
    width: 350px;
    height: 470px;
    position: absolute;
    top: 15%;
    left: 65%;
    display: none;
}

#studentSignUpBanner {
    position: absolute;
    top: 10px;
    left: 30px;
}

table#registerStudentFields {
    border-collapse: separate;
    border-spacing: 10px;
}

#registerStudentFields {
    position: absolute;
    left: 25px;
    top: 70px;
}

#studentField {
    font-size: 20px;
    width: 275px;
    height: 35px;
}

#studentFieldButton {
    font-size: 20px;
    width: 138px;
    height: 35px;
}

jquery.js：

$(document).ready(function(){


    $(".studentRegisterButton").click(function(){
        $("#signInDiv").slideDown(500);
        $("#studentRegisterDiv").slideUp(500);
    });

});

对不起编码。希望可以有人帮帮我。

4

1 回答 1

2

  1. 您的学生和官员按钮具有相同的 ID，“accessTypeButtons”。此外，您的 ID 为“signInField”的标签也是重复的。这是不允许的。将它们更改为具有唯一 ID。

  2. 您的学生和官员按钮具有“提交”类型，并且由于这些标签/按钮位于表单标签内，因此它将回发到服务器，这可能是您看到页面刷新的原因。jquery onclick 事件首先被触发，然后回发事件被触发。如果您不需要回发，请将类型更改为“按钮”

仅供参考...这不是特定于 php 的问题。这是一个 html 和 jQuery 问题

于 2013-10-17T02:00:25.730 回答