隐藏一个DIV和显示其他的div的onclick

Question

我有两个div的其中DIV 1将是可见的默认情况下，如果任何用户点击“点击我”链接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，你可以从文件
var div = document.getElementById('div1'); div.parentNode.removeChild(div);

箱中取出的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