36

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

9 回答 9

55

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

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

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

这也可以在没有 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>

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

于 2013-04-30T20:55:46.463 回答
18

这有效：

     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>

于 2015-02-03T20:13:30.347 回答
6

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();
});
于 2013-04-30T21:00:13.183 回答
5 
<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>
于 2014-03-07T09:36:51.977 回答
3

以下解决方案是：

  • 最简短的。有点类似于这里。它也很小：DIV 中的表格与您的问题正交。
  • 最快：getElementById一开始就被调用一次。这可能适合也可能不适合您的目的。
  • 它使用纯 JavaScript（即没有 JQuery）。
  • 它使用一个按钮。您的口味可能会有所不同。
  • 可扩展：它已准备好添加更多 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>

于 2017-06-26T20:29:46.360 回答
2 
 $('#btn').click(function() {
     $('#wizard').toggle(); 
 });

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

<div style="display:none;"> </div>
于 2015-01-28T05:32:22.677 回答
1

任务可以在没有 jQuery 等的情况下制作简单的 javascript。

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

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

现在你必须创建一个名为swHide的 css 类，它有display: none

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

很容易。

于 2014-08-09T14:18:30.163 回答
1

你可以完全用 html 和 css 来做这件事，我有。

HTML 首先你给你想要隐藏的 div 一个IDto target like#view_element和一个 class to target like #hide_element。如果你希望这两个类都可以，但我不知道你是否可以让它们都成为 ID。然后让你的 Show 按钮以你的节目 ID 为目标，你的 Hide 按钮以你的隐藏类为目标。这就是 html 的隐藏和显示是在 CSS 中完成的。

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

#hide_element:target {
    display:none;
}

.show_element:target{
    display:block;
}

这应该允许您随意隐藏和显示元素。这应该在跨度和 div 上很好地工作。

于 2015-05-11T16:36:32.383 回答
0

您可以通过将可见性设置为隐藏或显示为无的类，然后通过 javascript 在您希望的元素上切换该类来实现。

const para = document.querySelector("div");
const btn = document.querySelector('button');

btn.addEventListener('click', ()=>{
  para.classList.toggle('visibility-toggle')
})
.visibility-toggle{
    visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>Show/Hide</button>
<div>
    <h2>Heading</h2>
    <p>Click the button above me to hide me.</p>
</div>
</body>
</html>

于 2021-06-17T08:19:21.470 回答