隐藏其余的div和显示一个新的div后点击锚标记

我已经创建了两个三个div，我希望当我点击该选项卡上，其余的两个div应该隐藏，第三应显示。而我我试图做到这一点，但直到现在我还没有取得任何成功。隐藏其余的div和显示一个新的div后点击锚标记

请帮助我解决这个问题。

三个div的都是这样的---

第一个div

<div id="div1"> 
        <div style="text-align:center;padding:10px;">New to Register?</div> 
        <table align="center"> 
         <tr> 
          <td><input type="email" name="email" placeholder="Email" required pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$" title="[email protected]" > 
          </td> 
         </tr> 
         <tr> 
          <td><input type="password" name="password" placeholder="Password" required></td> 
         </tr> 
         <tr> 
          <td><input type="password" name="password" placeholder="Confirm Password" required></td> 
         </tr>  
         <tr> 
          <td> 
           <button style="height:32px; border-radius:2px; border:none; color:white; width:100%; margin-bottom: 12px; background-color:rgb(255, 201, 73)" name="submit" id="submit"> LOG IN </button> 
          </td> 

         </tr> 
        </table> 
</div>

第二个div ---

   <div id="div2"> 
        <div style="text-align:center;padding:10px;">Log In</div> 
         <table align="center"> 
          <tr> 
           <td><input type="text" name="email" placeholder="Email" required pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$" title="[email protected]" ></td> 
          </tr> 

          <tr> 
           <td><input type="password" name="password" placeholder="Password" required></td> 
          </tr> 

          <tr> 
           <td colspan="2" align="center"> 
            <div class="left"> 
             <label><input class="classforcheckbox" type="checkbox" />&nbsp;Keep me logged in</label> 
            </div> 

            <div class="right" ><a>Forgot Password?</a></div> 
           </td> 
          </tr> 

          <tr> 
           <td> 
            <button style="height:32px; border-radius:2px;margin-bottom: 10px; border:none; color:white; width:100%; background-color:rgb(255, 201, 73);" name="submit" id="submit"> LOG IN </button> 
           </td> 
          </tr> 
         </table> 
       </div>

三格---

   <div id="div3"> 
        <div style="text-align: center;padding: 10px">Forgot Password</div> 
         <div style="text-align: center;padding: 10px">Enter your email below and we'll send you an email with instruction on how to re-new your password.</div> 
         <table align="center"> 
          <tr> 
           <td> 
            <input type="text" name="email" placeholder="Email" required pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$" title="[email protected]"> 
           </td> 
          </tr> 
          <tr> 
           <td> 
            <button style="height: 32px;border-radius: 2px;margin-bottom: 10px;border: none;color: white;width: 100%;background-color: rgb(255, 201, 73);" name="submit" id="submit">Send Email</button> 
           </td> 
          </tr> 
         </table> 
       </div>

我当我cli时应该隐藏div1，div2 ck忘记密码，然后div3应显示。任何帮助将不胜感激。

来源

2016-04-26 Neha Purwar

要隐藏DIV1和DIV2整个DIV3的的onclick？ –

试试这个代码。当然，它可以进一步修改和简化，但这是一个很好的起点。

function checkRegister(selectedType){ 
 
    if (selectedType == 'register'){ 
 
    document.getElementById('div1').style.display = 'block'; 
 
    document.getElementById('div2').style.display = 'none'; 
 
\t document.getElementById('div3').style.display = 'none'; 
 
    
 
} else if (selectedType == 'forgot'){ 
 
    document.getElementById('div1').style.display = 'none'; 
 
    document.getElementById('div2').style.display = 'none'; 
 
\t document.getElementById('div3').style.display = 'block'; 
 
\t 
 
} else if (selectedType == 'login'){ 
 
\t document.getElementById('div1').style.display = 'none'; 
 
    document.getElementById('div2').style.display = 'block'; 
 
\t document.getElementById('div3').style.display = 'none'; 
 

 
} else { 
 
\t document.getElementById('div1').style.display = 'none'; 
 
    document.getElementById('div2').style.display = 'block'; 
 
\t document.getElementById('div3').style.display = 'none'; 
 

 
} 
 
}

.my_button { 
 
    height: 32px; 
 
    border-radius: 2px; 
 
    margin-bottom: 10px; 
 
    border: none; 
 
    color: white; 
 
    width: 150px; 
 
    background-color: rgb(255, 201, 73); 
 
}

<div id="div1"> 
 
\t <div style="text-align:center;padding:10px;"> 
 
     Register 
 
    </div> 
 
\t <table align="center"> 
 
\t \t <tr> 
 
\t \t \t <td><input type="email" name="email" placeholder="Email" required pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$" title="[email protected]" > 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td><input type="password" name="password" placeholder="Password" required></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td><input type="password" name="password" placeholder="Confirm Password" required></td> 
 
\t \t </tr>  
 
\t \t <tr> 
 
\t \t \t <td> 
 
\t \t \t \t <button class="my_button" name="submit" id="submit"> LOG IN </button> 
 
\t \t \t </td> 
 

 
\t \t </tr> 
 
\t </table> 
 
</div> 
 

 
<div id="div2" style="display: none;"> 
 
\t <div style="text-align:center;padding:10px;">Log In</div> 
 
\t \t <table align="center"> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><input type="text" name="email" placeholder="Email" required pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$" title="[email protected]" ></td> 
 
\t \t \t </tr> 
 

 
\t \t \t <tr> 
 
\t \t \t \t <td><input type="password" name="password" placeholder="Password" required></td> 
 
\t \t \t </tr> 
 

 
\t \t \t <tr> 
 
\t \t \t \t <td colspan="2" align="center"> 
 
\t \t \t \t \t <div class="left"> 
 
\t \t \t \t \t \t <label><input class="classforcheckbox" type="checkbox" />&nbsp;Keep me logged in</label> 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t </td> \t 
 
\t \t \t </tr> 
 

 
\t \t \t <tr> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <button class="my_button" name="submit" id="submit"> LOG IN </button> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
</div> 
 
<div id="div3" style="display: none;"> 
 
\t <div style="text-align: center;padding: 10px"> Forgot Password</div> 
 
\t \t <div style="text-align: center;padding: 10px">Enter your email below and we'll send you an email with instruction on how to re-new your password.</div> 
 
\t \t <table align="center"> 
 
\t \t \t <tr> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <input type="text" name="email" placeholder="Email" required pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$" title="[email protected]"> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <button class="my_button" name="submit" id="submit">Send Email</button> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t \t 
 
</div> 
 

 
<div style="text-align:center;padding:10px;"> 
 
    <button class="my_button" type="button" value="register" onclick="checkRegister(this.value)" >Register</button> 
 
    <button class="my_button" type="button" value="forgot" onclick="checkRegister(this.value)">Forgot Password</button> 
 
    <button class="my_button" type="button" value="login" onclick="checkRegister(this.value)">Login</button> \t \t \t 
 
</div>

来源

2016-04-26 12:09:30

谢谢@Marin Nedea ...这是我需要的，但我希望在点击忘记密码链接后得到div3。 –

@NehaPurwar - 我修好了:) –

好的，谢谢..我明白了。 –

你可以简单地用jQuery创建功能像

$("#div3").click(function(){ 
    $("#div1").hide(); 
    $("#div2").hide(); 
});

或者用纯JavaScript

<div id="div3" onclick="hideOtherDivs()">Div3</div> 
<script> 
function hideOtherDivs() 
{ 
    document.getElementById("div1").style.display = "none"; 
    document.getElementById("div2").style.display = "none"; 
} 
</script>

来源

2016-04-26 11:58:26

隐藏其余的div和显示一个新的div后点击锚标记

回答

相关问题