单击按钮时如何隐藏/显示 div? [英] How can I hide/show a div when a button is clicked?

问题描述

我有一个包含注册向导的 div，我需要在单击按钮时隐藏/显示这个 div.我该怎么做?

下面我给你看代码.

谢谢:)

 
<ul><li><a href="#step-1"><label class="stepNumber">1</label></a></li><li><a href="#step-2"><label class="stepNumber">2</label></a></li><li><a href="#step-3"><label class="stepNumber">3</label></a></li><li><a href="#step-4"><label class="stepNumber">4</label></a></li><div id="step-1"><h2 class="StepTitle">Perfil</h2><table cellspacing="3" cellpadding="3" align="center"><tr><td align="center" colspan="3"></td></tr><tr><td align="right">用户名:</td><td align="left"><input type="text" id="username" name="username" value="" class="txtBox"></td><td align="left"><span id="msg_username"></span></td></tr><tr><td align="right">密码:</td><td align="left"><input type="password" id="password" name="password" value="" class="txtBox"></td><td align="left"><span id="msg_password"></span></td></tr>

解决方案

使用 JQuery.您需要在按钮上设置一个点击事件，以切换向导 div 的可见性.

$('#btn').click(function() {$('#wizard').toggle();});

有关详细信息，请参阅 JQuery 网站.

这也可以在没有 JQuery 的情况下完成.仅使用标准 JavaScript:

然后在用于显示和隐藏div的按钮上添加onclick="toggle_visibility('id_of_element_to_toggle');".

I have a div that contains a register wizard, and I need hide/show this div when a button is clicked. How can I do this?

Below I show you the code.

Thanks :)

  <div id="wizard" class="swMain">
    <ul>
      <li><a href="#step-1">
            <label class="stepNumber">1</label>
        </a></li>
      <li><a href="#step-2">
            <label class="stepNumber">2</label>
        </a></li>
      <li><a href="#step-3">
            <label class="stepNumber">3</label>
         </a></li>
      <li><a href="#step-4">
            <label class="stepNumber">4</label>
        </a></li>
    </ul>
    <div id="step-1"> 
        <h2 class="StepTitle">Perfil</h2>
        <table cellspacing="3" cellpadding="3" align="center">
            <tr>
                  <td align="center" colspan="3">&nbsp;</td>
            </tr>        
            <tr>
                  <td align="right">Username :</td>
                  <td align="left">
                    <input type="text" id="username" name="username" value="" class="txtBox">
                  </td>
                  <td align="left"><span id="msg_username"></span>&nbsp;</td>
            </tr>
            <tr>
                  <td align="right">Password :</td>
                  <td align="left">
                    <input type="password" id="password" name="password" value="" class="txtBox">
                  </td>
                  <td align="left"><span id="msg_password"></span>&nbsp;</td>
            </tr>                                          
       </table>               
    </div>

解决方案

Use JQuery. You need to set-up a click event on your button which will toggle the visibility of your wizard div.

$('#btn').click(function() {
    $('#wizard').toggle();
});

Refer to the JQuery website for more information.

This can also be done without JQuery. Using only standard JavaScript:

<script type="text/javascript">
   function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }
</script>

Then add onclick="toggle_visibility('id_of_element_to_toggle');" to the button that is used to show and hide the div.

这篇关于单击按钮时如何隐藏/显示 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！