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

问题描述

我有一个 DIV 包含一个寄存器向导，我需要隐藏/显示此 DIV 当按钮被点击。
我怎样才能做到这一点？

下面我向您展示了code。

感谢：）

 ＆LT; D​​IV ID =巫师级=swMain＆GT;
    ＆LT; UL＆GT;
      ＆LT;立GT;＆LT; A HREF =＃STEP-1＆GT;
            ＆LT;标签类=STEPNUMBER＆GT; 1 LT; /标签＆gt;
        ＆LT; / A＆GT;＆LT; /李＆GT;
      ＆LT;立GT;＆LT; A HREF =＃步-2＆GT;
            ＆LT;标签类=STEPNUMBER＆GT; 2'; /标签＆gt;
        ＆LT; / A＆GT;＆LT; /李＆GT;
      ＆LT;立GT;＆LT; A HREF =＃步-3＆GT;
            ＆LT;标签类=STEPNUMBER＆GT;第3版; /标签＆gt;
         ＆LT; / A＆GT;＆LT; /李＆GT;
      ＆LT;立GT;＆LT; A HREF =＃步-4＆GT;
            ＆LT;标签类=STEPNUMBER＆GT; 4℃; /标签＆gt;
        ＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    ＆LT; D​​IV ID =STEP-1＆GT;
        ＆LT; H2类=StepTitle＆GT;＆PERFIL LT; / H＆GT;
        ＆LT;表CELLSPACING =3的cellpadding =3ALIGN =中心＆GT;
            ＆所述; TR＆GT;
                  ＆所述; TD对齐=中心列跨度=3＆GT;＆放大器; NBSP;＆下; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆所述; TR＆GT;
                  ＆LT; TD ALIGN =右＆GT;用户名：​​其中; / TD＆GT;
                  ＆LT; TD align =left＆GT;
                    ＆LT;输入类型=文本ID =用户名NAME =用户名价值=级=txtBox＆GT;
                  ＆LT; / TD＆GT;
                  ＆LT; TD align =left＆GT;＆LT;跨度ID =msg_username＆GT;＆LT; / SPAN＆GT;＆安培; NBSP;＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆所述; TR＆GT;
                  ＆LT; TD ALIGN =右＆GT;密码：LT; / TD＆GT;
                  ＆LT; TD align =left＆GT;
                    ＆LT;输入类型=密码ID =密码NAME =密码值=级=txtBox＆GT;
                  ＆LT; / TD＆GT;
                  ＆LT; TD align =left＆GT;＆LT;跨度ID =msg_password＆GT;＆LT; / SPAN＆GT;＆安培; NBSP;＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
       ＆LT; /表＆gt;
    ＆LT; / DIV＆GT;
 

解决方案

使用jQuery。您需要设置，在您的按钮的click事件，这将触发你的向导div的知名度。

  $（'＃BTN'）。点击（函数（）{
    $（'＃向导）切换（）。
}）;
 

参阅 JQuery的网站了解更多信息。

这也可以不JQuery的完成。仅使用标准的JavaScript：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
   功能toggle_visibility（ID）{
       变种E =的document.getElementById（id）的;
       如果（e.style.display =='块'）
          e.style.display =无;
       其他
          e.style.display =块;
   }
＆LT; / SCRIPT＆GT;
 

然后加入的onclick =toggle_visibility（'id_of_element_to_toggle'）;来用于显示和隐藏DIV的按钮

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