Question

我有两个div，其中DIV 1默认可见，如果有任何用户点击“Click me”链接，DIV 1应该隐藏，DIV 2应该可见，之后我不想显示DIV任何点击都是1。 DIV 1应永久隐藏，直到页面刷新为止。

我处理了一个代码，但我无法永久隐藏DIV 1。

请查看此代码。

<script>
function showDivs(start)
{
 var div;
 while((div = document.getElementById('div' + start)) !== false)
 {
  div.style.display = (div.style.display == 'none') ? '' : 'none';
  start ++;
 }
}
</script> 
<div class="expressBox"><div class="expressBtn"><a href="javascript:;" onclick="showDivs(1);" id="displayText">Click ME</a></div>
              <div class="txtStyle expressTxt" id="div1">Use saved addresses and payment options to expendite your purchase.</div>
              <div id="div2" style="display:none">
                <div class="existUserBox">
                  <div class="userHD"><strong>New User</strong></div>

                    <form name="ZB_ZipForm" action="$field{site_url_secure}/expresscheckout/index.html" method="post">
                    <div class="txtShipping">
                      <input type="text" size="13" maxlength="10" name="txt_zip" id="zipcode" placeholder="Zip Code" class="inputSpace" value="" />
                     <div class="clr"></div>
                      Required for Express Checkout</div>
                      <div class="btnSubmit">
                        <input type="image" name="btn_ExpressZip" src="$field{path_images}/global/btn-express-submit.png" />
                      </div>
                    </form>

                </div>
                <div class="orDivider"><span>or</span></div>
                <div class="existUserBox">
                  <form name="ZB_LoginForm" action="$field{site_url_secure}/expresscheckout/login.html" method="post">
                    <div class="userHD"><strong>Existing User</strong></div>
                    <div class="txtShipping">
                      <input type="text" name="username" size="20" id="username"  placeholder="User Name" value="" class="inputSpace userSpace" />
                    </div>
                    <div class="txtShipping">
                      <input type="password" name="password" id="password"  placeholder="Password" size="20" class="inputSpace userSpace nomargBott" />
                    </div>
                    <div class="reqExpChk"><a class="smallcolor" href="$field{site_url}/reminder/index.html" onMouseOver="status='Click for password help.'; return true;" onMouseOut="status=''; return true;">Forgot Password ?</a></div>
                    <div class="btnSubmit">
                      <input type="image" name="btn_Login" src="$field{path_images}/global/btn-express-submit.png" />
                    </div>
                  </form>
                </div>
              </div>
              </div>

我试图找到这种解决方案，但没有得到任何解决方案。请帮我。非常感谢。

Answer 1

案例1： 如果你只处理两个div，你可以直接进行更改而不是使用循环 document.getElementById('div1).style.display = 'none'; document.getElementById('div2).style.display = 'block';

案例2： 如果您正在处理多个div，则可以从文档中删除div元素 var div = document.getElementById('div1'); div.parentNode.removeChild(div);

案例3： 如果你正在处理多个div而你不想永久删除该元素，那么 Use an array to store the id of div elements which are previously made invisible. Use the array everytime to make sure that divs in the array are not made visible again

隐藏一个div并显示另一个div onclick

1 个答案: