Question

我从一些基础php开始，并注入了我的（以前工作）javascipt＆＃34;标签专利＆＃34;将所有东西放在一个地方。

我在两个＆＃39;部分中有两种表格。，点击＆＃34;注册＆＃34;按钮，第一个登录＆＃39;部分隐藏，并注册＆＃39;部分出现。但它只出现在第二个（眨眼），你可以检查这里有什么问题吗？

＆＃39>注册＆＃39;默认情况下，在css样式表中隐藏了section，然后在单击按钮后，javascript代码会更改可见性值，但是为什么它只闪烁一次并再次隐藏？

JS

dotnet

HTML

function showSignup () {
            document.getElementById("signup").style.visibility = "visible";
            document.getElementById("login").style.visibility = "hidden";
        }
function showLogin () {
            document.getElementById("signup").style.visibility = "hidden";
            document.getElementById("login").style.visibility = "visible";
        }

CSS

<!DOCTYPE html>
<head>    
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/base-min.css">
    <link href="style.css" rel="stylesheet">
    <script type="text/javascript" src="script.js" ></script>
</head>

<body>

<section id="login">

    <form action="login.php" method="post"> 
        <p>your login: <input type="text" name="login" value="" /> </p>
        <p>your pass: <input type="text" name="pass" value="" /> </p>
        <p> <input type="submit" value="send" /> </p> 
    </form>

    <form action="" method="post">
        <p><input type="submit" value="sign up" onclick="showSignup()" /> </p>
    </form>

</section>

<section id="signup">

    <form method="post">

        <h2>Create new account</h2>
        <p>login: <input type="text" name="slogin" value="" /></p>
        <p>e-mail: <input type="text" name="semail" value="" /></p>
        <p>password: <input type="text" name="spass" value="" />  </p>
        <p><input type="submit" value="Sign Up" /> </p>

    </form>

    </section>

</body>
</html>

我做了一个jsfiddle，但在点击＆＃34;注册＆＃34;按钮

html, body {
    margin: 0;
    padding: 0; 
}
section {
    position: relative;
    margin: 2em auto;
    padding: 1em;
    border: solid gray 2px;
    border-radius: 8px;
    width: 400px;
}
#signup {
    visibility: hidden;
    position: absolute;
}
#login {
    position: absolute;
}

为什么？

Answer 1

您已将该功能附加到表单中的提交按钮。当您点击它时，JavaScript会运行，然后表单会提交加载新页面。

使用常规按钮，不要使用表单。

Answer 2

第二个表单的提交按钮，ID为＆＃34;登录＆＃34;触发表单，然后重新加载页面。

因此，您可以阻止表单使用JavaScript提交或将输入类型更改为按钮。

onClick可见性切换器未按预期工作

2 个答案: