How can I hide/show a div when a button is clicked

2020-01-30 05:45发布

站内问答 / 前端开发
1840 8 5

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>

8条回答
相关推荐>>
2楼-- · 2020-01-30 06:21

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.

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
3楼-- · 2020-01-30 06:24

The following solution is:

  • briefest. Somewhat similar to here. It's also minimal: The table in the DIV is orthogonal to your question.
  • fastest: getElementById is called once at the outset. This may or may not suit your purposes.
  • It uses pure JavaScript (i.e. without JQuery).
  • It uses a button. Your taste may vary.
  • extensible: it's ready to add more DIVs, sharing the code.

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>

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
4楼-- · 2020-01-30 06:31

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

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.

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

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

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
5楼-- · 2020-01-30 06:34 
<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>
查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
6楼-- · 2020-01-30 06:38

Task can be made simple javascript without jQuery etc.

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

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

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

So easy it is.

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
7楼-- · 2020-01-30 06:39

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

$('#button').click(function(e){
    e.preventDefault(); //to prevent standard click event
    $('#wizard').toggle();
});
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)