隱藏一個DIV和顯示其他的div的onclick

我有兩個div的其中DIV 1將是可見的默認情況下，如果任何用戶點擊「點擊我」鏈接DIV 1應該得到隱藏和DIV 2應該得到看得見，之後我不想在任何點擊中顯示DIV 1。 DIV 1應該永久隱藏，直到頁面刷新。隱藏一個DIV和顯示其他的div的onclick

我在一個代碼上工作，但我無法永久隱藏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>

我試圖找到這種解決方案，但沒有得到任何。請幫幫我。非常感謝。

來源

2012-11-20 Vika Hatwal

案例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

來源

2012-11-20 10:42:58 Senthilnathan

感謝您的回覆和建議。如果你能爲我提供一個工作例子，我需要什麼，因爲我沒有很好的javascript :(。 –

你沒有提到你上面描述的情況下，你給了一個簡單的解決方案，只是改變線'div。 style.display =（div.style.display =='none'）？''：'none';' TO'（div.style.display =='none'）？（div.style.display ='block '）：（div.parentNode.removeChild（div））;' – Senthilnathan

感謝您的幫助，它的工作原理.. :) –

隱藏一個DIV和顯示其他的div的onclick

回答

相關問題