0

デフォルトでDIV1が表示される2つのdivがあり、ユーザーが[クリックしてください]リンクをクリックすると、DIV 1が非表示になり、DIV 2が表示されます。その後、DIV1を表示したくありません。クリック。DIV 1は、ページが更新されるまで完全に非表示になります。

1つのコードで作業しましたが、DIV1を完全に非表示にすることはできません。

このコードをご覧ください。

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

私はこの種の解決策を見つけようとしましたが、何も得られませんでした。私を助けてください。どうもありがとう。

4

1 に答える 1

2

ケース 1: 2 つの 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

于 2012-11-20T10:42:58.490 に答える