Question

当用户点击登录并且用户点击时，因为忘记密码，div sign_in和forgot_password都可以打开。一切都很好，除了我只想让一个人打开，而另一个人关闭。如果我开始点击两个div，我怎么能一次只打开一个？提前谢谢！

<a href="#" onclick="showhide('sign_in'); return(false);">Sign In</a>

<a href="#" onclick="showhide('forgot_password'); return(false);">Forgot Password?</a>

<div id="sign_in" style="display:none;">
 <iframe name="user_content_login" frameborder="no" scrolling="no" src="some_user_file.html" height="195"></iframe>
</div>

<div id="forgot_password" style="display:none;">
<iframe name="user_content_forgot_password"   frameborder="no" scrolling="no" src="some_forgot_password_file.html" marginwidth="0" marginheight="0"></iframe>
</div>

Answer 1

由于这是标记为jQuery，首先让我们从标记中删除内联JavaScript，而是使用类来引用元素

<a href="#sign_in" class=show-hide>Sign In</a>

<a href="#forgot_password" class=show-hide>Forgot Password?</a>

你可以移除DIV并将ID分配给IFRAME，但是你可能不应该再使用IFRAME，但这是一个不同的主题，无论如何让我们对目标进行分组使用名为target

的类

<div id="sign_in" style="display:none;" class=target>
 <iframe name="user_content_login" frameborder="no" scrolling="no" src="some_user_file.html" height="195"></iframe>
</div>

<div id="forgot_password" style="display:none;" class=target>
<iframe name="user_content_forgot_password" frameborder="no" scrolling="no" src="some_forgot_password_file.html" marginwidth="0" marginheight="0"></iframe>
</div>

[旁注：你可以从DIV中删除内联样式（style="display:none;"）并将其放入CSS文件中.target{display:none}]

这是jQuery的示例：

$('.show-hide').click(function(e){
    e.preventDefault(); //prevent from window jumping to the div or the location bar changing
    $('.target').hide(); //hide both divs
    $($(this).attr('href')).show(); //show the div with the id of the clicked links href 
});

Answer 2

您可以简化它并执行以下操作。根据需要进行调整。

基本显示/隐藏

$('li').click(function() {
  $('#credentials div:visible').hide(); // Hide the visible div
  $('#credentials div').eq($(this).index()).show(); 
// The above line shows the corresponding div to the clicked LI
});

ul {
  text-align: center;
  width: 500px;
}
li {
  display: inline-block;
  font-size: 18px;
  padding: 0 20px 0 20px;
  cursor: pointer;
}
#login,
#recover-password {
  font-size: 36px;
  color: red;
  width: 500px;
  text-align: center;
}
#credentials div:last-of-type {
  display: none;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="credentials">

  <ul>
    <li>Sign in</li>
    <li>Forgot password</li>



  </ul>


  <div id="login">

    Login form goes here

  </div>
  <!-- End Login Form -->

  <div id="recover-password">

    Recovery form goes here

  </div>
  <!-- End Login Form -->

</div>
<!-- Credentials End here -->

使用一些动画：

$('li').click(function() {
  $('#credentials div:visible').hide();
  $('#credentials div').eq($(this).index()).show(1000);
// Regulating the speed adds some animation to it
});

ul {
  text-align: center;
  width: 500px;
}
li {
  display: inline-block;
  font-size: 18px;
  padding: 0 20px 0 20px;
  cursor: pointer;
}
#login,
#recover-password {
  font-size: 36px;
  color: red;
  width: 500px;
  text-align: center;
}
#credentials div:last-of-type {
  display: none;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="credentials">

  <ul>
    <li>Sign in</li>
    <li>Forgot password</li>



  </ul>


  <div id="login">

    Login form goes here

  </div>
  <!-- End Login Form -->

  <div id="recover-password">

    Recovery form goes here

  </div>
  <!-- End Login Form -->

</div>
<!-- Credentials End here -->

注意：您可以淡出显示可见元素，并将相应元素淡入已点击的元素。

如何不同时打开两个div？

2 个答案: