web-dev-qa-db-ja.com

ボタンがクリックされたときにdivを非表示/表示するにはどうすればよいですか？

登録ウィザードを含む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>
htmlbuttonhideshow
31
Julia

JQueryを使用します。ウィザードdivの表示を切り替えるボタンのクリックイベントを設定する必要があります。

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

詳細については、 JQuery Webサイトを参照してください。

これは、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の表示と非表示に使用されるボタンに追加します。

48
wellers

これは動作します：

     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>
16
xpt

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

$('#button').click(function(e){
    e.preventDefault(); //to prevent standard click event
    $('#wizard').toggle();
});
6
Jarek Jakubowski
<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>
4
dimitryous

次の解決策は次のとおりです。

  • 最短。 here とやや似ています。最小限でもあります。DIVの表はあなたの質問と直交しています。
  • 最速：getElementByIdは最初に1回呼び出されます。これは、目的に合っている場合とそうでない場合があります。
  • 純粋な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>
2
Calaf
 $('#btn').click(function() {
     $('#wizard').toggle(); 
 });

divを非表示にして始めたい場合は、次のようにstyle="display:none;"を追加する必要があります。

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

あなたは完全にhtmlとcssでこれを行うことができ、私は持っています。

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

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

#hide_element:target {
    display:none;
}

.show_element:target{
    display:block;
}

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

1
Matthew Henson

タスクはjQueryなどを使用せずに単純なjavascriptにすることができます。

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

この関数は、wizardがクラスswMainおよびクラスをswHideに変更し、そうでない場合swMainに変更してからswMain。このコードは複数のクラス属性をサポートしていませんが、この場合はそれで十分です。

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

次に、ボタンに追加しますonclick = "showhide（）"

とても簡単です。

1
JarnoV