36

div登録ウィザードを含む があり、ボタンがクリックされたときにこれを非表示/表示する必要がdivあります。これどうやってするの？

以下にコードを示します。

ありがとう ：）

  <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

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

これは HTML/CSS だけでは実現できません。ここでは JavaScript を使用する必要があります。jQuery では次のようになります。

$('#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 に答える
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に変更します。このコードは複数のクラス属性をサポートしていませんが、この場合はそれで十分です。

ここで、 display: noneを持つswHideという名前の css クラスを作成する必要があります。

次に、ボタンにonclick="showhide()"を追加します

とても簡単です。

于 2014-08-09T14:18:30.163 に答える
1

これは完全に html と css で行うことができます。

HTML 最初に、非表示にする divIDをターゲット like#view_elementに指定し、クラスをターゲット like に指定し#hide_elementます。これらのクラスの両方を作成したい場合はできますが、両方の ID を作成できるかどうかはわかりません。次に、Show ボタンで show ID をターゲットにし、Hide ボタンで hide クラスをターゲットにします。これで、html の表示と非表示は CSS で行われます。

CSS これを表示および非表示にする css は、次のようになります。

#hide_element:target {
    display:none;
}

.show_element:target{
    display:block;
}

これにより、要素を自由に非表示および表示できるようになります。これは、スパンと div でうまく機能するはずです。

于 2015-05-11T16:36:32.383 に答える