3

基本上我有注册和登录，我他们都是 div，点击链接时会出现和消失，但我希望一个在点击另一个链接然后打开时关闭。

示例：登录区打开并单击注册按钮。我希望登录区域消失并显示注册内容。

当前代码：

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("signin");
    var text = document.getElementById("signtext");
    var ele2 = document.getElementById("signup");
    var text2 = document.getElementById("signuptext");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "show";
        ele2.style.display = "block";
        text2.innerHTML = "hide";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
        ele2.style.display = "block";
        text2.innerHTML = "hide";
    }
}
function toggle2() {
    var ele2 = document.getElementById("signup");
    var text2 = document.getElementById("signuptext");
    var ele = document.getElementById("signin");
    var text = document.getElementById("signtext");
    if(ele2.style.display == "block") {
        ele2.style.display = "none";
        text2.innerHTML = "show";   
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
    else {
        ele2.style.display = "block";
        text2.innerHTML = "hide";
        ele.style.display = "block";
        text.innerHTML = "hide";
    }   
} 
</script>

网页：

<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>
4

4 回答 4

1

试试这个。不需要创建两个不同的函数。更少的函数数量=更好的代码+更聪明的编码器！！！！

function toggle(id){

switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;

case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}

HTML

<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>
于 2013-06-21T04:20:52.047 回答
0

尝试从中获取概念，可能并不完美，但仍然包含一些学习部分-

检查这个工作小提琴- http://jsfiddle.net/j7LDD/

工作代码-

HTML 部分 - 

<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>

<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>

<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>

JS部分 -

<script>
function toggle( val ) {
    if( "signupbutton" == val ) {
    document.getElementById("signup").style.display = 'block';
    document.getElementById("signin").style.display = 'none';
    }
    else {
    document.getElementById("signin").style.display = 'block';
    document.getElementById("signup").style.display = 'none';
    }
}
</script>
于 2013-06-21T04:39:17.970 回答
0

试试这个：

function signUpIn(objId) {
   document.getElementById('signin').style.display = 'none';
   document.getElementById('signup').style.display = 'none';

   document.getElementById(objId).style.display = 'block';
}

您的 html 更改：

<div id="signin" style="display: block">

</div>    
<div id="signup" style="display: none">
</div>

<a href="javascript: signUpIn('signup');">Sign Up</a>
<a href="javascript: signUpIn('signin');">Sign In</a>

检查它是否适合您。

于 2013-06-21T04:15:28.190 回答
0

您可以在“onclick”事件上调用函数并使用CSS:Visibility属性 隐藏 div

<a id="myLink" href="#" onclick="MyFunction();">link text</a>
于 2013-06-21T04:15:39.317 回答