我创建了两个三个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._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com" >
</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._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com" ></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" /> 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._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com">
</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>
我希望在点击忘记密码时隐藏div1，div2，然后显示div3。 任何帮助将不胜感激。
答案 0 :(得分：1)
试试这段代码。当然，它可以进一步修改和简化，但它是一个很好的起点。
function checkRegister(selectedType){
if (selectedType == 'register'){
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
} else if (selectedType == 'forgot'){
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'block';
} else if (selectedType == 'login'){
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
document.getElementById('div3').style.display = 'none';
} else {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
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">
<div style="text-align:center;padding:10px;">
Register
</div>
<table align="center">
<tr>
<td><input type="email" name="email" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com" >
</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 class="my_button" name="submit" id="submit"> LOG IN </button>
</td>
</tr>
</table>
</div>
<div id="div2" style="display: none;">
<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._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com" ></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" /> Keep me logged in</label>
</div>
</td>
</tr>
<tr>
<td>
<button class="my_button" name="submit" id="submit"> LOG IN </button>
</td>
</tr>
</table>
</div>
<div id="div3" style="display: none;">
<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._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="example@example.com">
</td>
</tr>
<tr>
<td>
<button class="my_button" name="submit" id="submit">Send Email</button>
</td>
</tr>
</table>
</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>
</div>
答案 1 :(得分：0)
您可以使用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>