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>

HTML :

<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

これを試してみてください.2つの異なる関数を作成する必要はありません.関数の数が少ない=コードが優れている+コーダーが賢い!!!!

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 PART -

<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 に答える