当单击按钮时，如何隐藏/显示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?

我有一个包含寄存器向导的div，当单击按钮时，我需要隐藏/显示这个div。我该怎么做呢?

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>

8 个解决方案

#1

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

使用JQuery。您需要在按钮上设置单击事件，该事件将切换向导div的可见性。

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

Refer to the JQuery website for more information.

更多信息请参考JQuery网站。

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

这也可以在没有JQuery的情况下完成。只使用标准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.

然后将onclick=“toggle_visibility(' id_of_element_to_to_toggle ')”添加到用于显示和隐藏div的按钮中。

#2

This works:

如此:

     function showhide(id) {
       	var e = document.getElementById(id);
       	e.style.display = (e.style.display == 'block') ? 'none' : 'block';
     }

    <!DOCTYPE html>
    <html>   
    <body>
    
    	<a href="javascript:showhide('uniquename')">
    		Click to show/hide.
    	</a>
    
    	<div id="uniquename" style="display:none;">
    		<p>Content goes here.</p>
    	</div>
    
    </body>
    </html>

#3

This can't be done with just HTML/CSS. You need to use javascript here. In jQuery it would be:

仅仅使用HTML/CSS是做不到的。这里需要使用javascript。在jQuery中

$('#button').click(function(e){
    e.preventDefault(); //to prevent standard click event
    $('#wizard').toggle();
});

#4

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show and hide div with JavaScript</title>
<script>

    var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>';
    var show_button = 'Show', hide_button = 'Hide';
    function showhide() {
        var div = document.getElementById( "hide_show" );
        var showhide = document.getElementById( "showhide" );
        if ( div.style.display !== "none" ) {
            div.style.display = "none";
            button = show_button;
            showhide.innerHTML = button_beg + button + button_end;
        } else {
            div.style.display = "block";
            button = hide_button;
            showhide.innerHTML = button_beg + button + button_end;
        }
    }
    function setup_button( status ) {
        if ( status == 'show' ) {
            button = hide_button;
        } else {
            button = show_button;
        }
        var showhide = document.getElementById( "showhide" );
        showhide.innerHTML = button_beg + button + button_end;
    }
    window.onload = function () {
        setup_button( 'hide' );
        showhide(); // if setup_button is set to 'show' comment this line
    }
</script>
</head>
<body>
    <div id="showhide"></div>
    <div id="hide_show">
        <p>This div will be show and hide on button click</p>
    </div>
</body>
</html>

#5

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

if you want to begin with the div hidden, you should add style="display:none;", like this:

如果您想从隐藏的div开始，您应该添加style="display:none;”,像这样:

<div style="display:none;"> </div>

#6

The following solution is:

以下解决方案:

briefest. Somewhat similar to here. It's also minimal: The table in the DIV is orthogonal to your question.
简洁的。有点类似于这里。它也是最小的:DIV中的表与您的问题是正交的。
fastest: getElementById is called once at the outset. This may or may not suit your purposes.
最快:getElementById在开始时调用一次。这可能适合你的目的，也可能不适合。
It uses pure JavaScript (i.e. without JQuery).
它使用纯JavaScript(即不使用JQuery)。
It uses a button. Your taste may vary.
它使用一个按钮。你的口味可能会有所不同。
extensible: it's ready to add more DIVs, sharing the code.
可扩展:它准备添加更多的div，共享代码。

mydiv = document.getElementById("showmehideme");

function showhide(d) {
    d.style.display = (d.style.display !== "none") ? "none" : "block";
}

#mydiv { background-color: #ddd; }

<button id="button" onclick="showhide(mydiv)">Show/Hide</button>
<div id="showmehideme">
    This div will show and hide on button click.
</div>

#7

Task can be made simple javascript without jQuery etc.

任务无需jQuery等即可实现简单的javascript。

<script type="text/javascript">
function showhide() {
document.getElementById("wizard").className = (document.getElementById("wizard").className=="swMain") ? swHide : swMain;
}
</script>

This function is simple if statement that looks if wizard has class swMain and change class to swHide and else if it's not swMain then change to swMain. This code doesn't support multiple class attributes but in this case it is just enough.

这个函数是简单的if语句，它查找如果向导有类swMain，并将类更改为swHide，如果不是swMain，则更改为swMain。这段代码不支持多个类属性，但在这种情况下就足够了。

Now you have to make css class named swHide that has display: none

现在，您必须将css类命名为swHide，它具有display: none

Then add on to the button onclick="showhide()"

然后添加到按钮onclick="showhide()"

So easy it is.

那么容易。

#8

You can do this entirely with html and css and i have.

你完全可以用html和css来做，我也有。

HTML First you give the div you wish to hide an ID to target like #view_element and a class to target like #hide_element. You can if you wish make both of these classes but i don't know if you can make them both IDs. Then have your Show button target your show id and your Hide button target your hide class. That is it for the html the hiding and showing is done in the CSS.

首先，你给你想要隐藏ID的div，比如#view_element和#hide_element这样的类。如果你希望这两个类都可以，你可以，但我不知道你能不能把它们都变成id。然后让你的显示按钮目标你的显示id和你的隐藏按钮目标你的隐藏类。这就是html的隐藏和显示是在CSS中完成的。

CSS The css to show and hide this should look something like this

显示和隐藏的CSS应该是这样的

#hide_element:target {
    display:none;
}

.show_element:target{
    display:block;
}

This should allow you to hide and show elements at will. This should work nicely on spans and divs.

这将允许您随意隐藏和显示元素。这应该在span和divs上工作得很好。

#1