Wie kann ich den ausblenden/einblenden eines div-wenn ein button geklickt wird?

Ich habe eine div enthält ein register Assistent und ich muss mich verstecken/anzuzeigen div wenn auf eine Schaltfläche geklickt wird.
Wie kann ich dies tun?

Unten zeige ich Ihnen den code.

Dank 🙂

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

InformationsquelleAutor der Frage Julia | 2013-04-30

44

JQuery Verwenden. Sie brauchen, um set-up ein Klick-Ereignis auf dem button, wodurch das Umschalten der Sichtbarkeit Ihrer Assistenten div.
```
$('#btn').click(function() {
    $('#wizard').toggle();
});
```
Beziehen sich auf die JQuery website für weitere Informationen.

Dies kann auch durchgeführt werden, ohne JQuery. Nur mit 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>
```
Dann fügen Sie onclick="toggle_visibility('id_of_element_to_toggle');" auf den Knopf, der zum ein-und ausblenden des div.

InformationsquelleAutor der Antwort wellers
5

Dies kann nicht getan werden, nur mit HTML/CSS. Sie müssen javascript verwendet hier. In jQuery wäre es:
```
$('#button').click(function(e){
    e.preventDefault(); //to prevent standard click event
    $('#wizard').toggle();
});
```
InformationsquelleAutor der Antwort 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>

InformationsquelleAutor der Antwort dimitryous

2
```
 $('#btn').click(function() {
     $('#wizard').toggle(); 
 });
```
wenn Sie möchten, beginnen Sie mit der div versteckt, sollten Sie style="display:none;" wie diese:
```
<div style="display:none;"> </div>
```
InformationsquelleAutor der Antwort Jlcanizales
1

Aufgabe gemacht werden kann, einfach ohne javascript, jQuery etc.
```
<script type="text/javascript">
function showhide() {
document.getElementById("wizard").className = (document.getElementById("wizard").className=="swMain") ? swHide : swMain;
}
</script>
```
Dieser Funktion ist die einfache if-Anweisung, das aussieht, wenn Assistenten hat Klasse swMain und Klasse ändern zu swHide und anderes, wenn es nicht swMain dann ändern zu swMain. Dieser code keine Unterstützung für mehrere Attribute der Klasse, aber in diesem Fall ist es einfach genug.

Jetzt haben Sie, um die css-Klasse namens " swHidedisplay: none

Fügen Sie dann auf die Schaltfläche onclick="anzeigenausblenden()"

So einfach ist das.

InformationsquelleAutor der Antwort JarnoV
1

Können Sie tun dies ausschließlich mit html und css und ich.

HTML
Zuerst gibst du dem div die Sie ausblenden möchten ein ID Ziel wie #view_element und ein Klasse Gegner wie #hide_element. Sie können, wenn Sie möchten stellen diese beiden Klassen, aber ich weiß nicht, ob Sie können Sie sowohl IDs. Dann haben Sie Ihre Karte-Knopf-Ziel Ihrer show-id und Ihr Hide-Taste richten Sie Ihre ausblenden Klasse. Das ist es für die html-und einblenden erfolgt in der CSS.

CSS
Die css ein-und ausblenden, diese sollte in etwa so Aussehen
```
#hide_element:target {
    display:none;
}

.show_element:target{
    display:block;
}
```
Dies sollte Ihnen ermöglichen, sich zu verstecken und zeigen Elemente. Dies sollte gut funktionieren auf spannen und divs.

InformationsquelleAutor der Antwort Matthew Henson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.