Wie kann ich ein Div anzeigen/ausblenden, wenn auf eine Schaltfläche geklickt wird?

Ich habe eine div, die einen Register-Assistenten enthält, und ich muss diese div verstecken/anzeigen, wenn eine Schaltfläche geklickt wird. Wie kann ich das tun?Wie kann ich ein Div anzeigen/ausblenden, wenn auf eine Schaltfläche geklickt wird?

Im Folgenden zeige ich Ihnen den 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>

Quelle

2013-04-30 Julia

möglich Duplikat http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button –

Verwendung JQuery. Sie müssen auf Ihrer Schaltfläche ein Klickereignis einrichten, mit dem Sie die Sichtbarkeit Ihres Assistenten div umschalten können.

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

Weitere Informationen finden Sie auf der Website JQuery.

Dies kann auch ohne JQuery erfolgen. Mit nur 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 auf die Schaltfläche hinzufügen, die verwendet wird, um die div ein- und ausblenden.

Quelle

2013-04-30 20:55:46 wellers

Ich glaube, dass die OP sucht eine einfachere Lösung als die Verwendung einer Bibliothek eines Drittanbieters (jQuery nicht markiert). Dies kann ohne JQuery erfolgen. –

Nur eine Anmerkung zum OP: Verwenden Sie 'visibility: hidden/visible;', wenn Sie nicht möchten, dass das #wizard div Speicherplatz für andere Elemente freigibt. Verwenden Sie 'display: none/block;', wenn das #wizard-div mit einer Größe, einem Rand und Padding-Eigenschaften verborgen werden soll, die dem Wert 0 entsprechen. – Tyblitz

Dies kann nicht nur mit HTML/CSS getan werden. Sie müssen Javascript hier verwenden. In jQuery wäre es:

$('#button').click(function(e){ 
    e.preventDefault(); //to prevent standard click event 
    $('#wizard').toggle(); 
});

Quelle

2013-04-30 21:00:13

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

Quelle

2014-03-07 09:36:51 dimitryous

Aufgabe kann einfach Javascript ohne jQuery usw.

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

gemacht werden Diese Funktion ist einfach, wenn Anweisung, wenn Assistent hat Klasse SWMAIN sieht und ändern Sie die Klasse in swHide und andernfalls, wenn es nicht swMain ist, dann wechseln Sie zu swMain. Dieser Code unterstützt nicht mehrere Klassenattribute, aber in diesem Fall ist es gerade genug.

Jetzt müssen Sie CSS-Klasse mit dem Namen swHide, das hat Display machen: keine

Dann fügen Sie auf die Schaltfläche Onclick = "showhide()"

So einfach es ist.

Quelle

2014-08-09 14:18:30 JarnoV

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

, wenn Sie mit dem div versteckt beginnen möchten, sollten Sie style="display:none;", wie folgt hinzufügen:

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

Quelle

2015-01-28 05:32:22 Jlcanizales

Dies funktioniert:

 function showhide(id) { 
 
     \t var e = document.getElementById(id); 
 
     \t e.style.display = (e.style.display == 'block') ? 'none' : 'block'; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    <body> 
 
    
 
    \t <a href="javascript:showhide('uniquename')"> 
 
    \t \t Click to show/hide. 
 
    \t </a> 
 
    
 
    \t <div id="uniquename" style="display:none;"> 
 
    \t \t <p>Content goes here.</p> 
 
    \t </div> 
 
    
 
    </body> 
 
    </html>

Quelle

2015-02-03 20:13:30 xpt

Danke für die einfache und effiziente Lösung :) –

Sie können mach das komplett mit html und cs s und ich haben.

HTML Zuerst geben Sie die div Sie wünschen eine ID zu verbergen wie #view_element und einer Klasse zielen wie #hide_element Ziel. Sie können, wenn Sie möchten, diese beiden Klassen machen, aber ich weiß nicht, ob Sie beide IDs machen können. Lassen Sie dann Ihre Show-Schaltfläche auf Ihre Anzeigen-ID ausrichten und wählen Sie mit der Schaltfläche "Ausblenden" Ihre Versteckklasse aus. Das ist es für das html das Ausblenden und Anzeigen erfolgt in der CSS.

CSS Die CSS dies zeigen und verstecken so etwas wie dieses

#hide_element:target { 
    display:none; 
} 

.show_element:target{ 
    display:block; 
}

Sie nach Belieben ein- und ausblenden Elemente Dies sollte erlauben aussehen sollte. Dies sollte gut auf Spannen und Divs funktionieren.

Quelle

2015-05-11 16:36:32

Die folgende Lösung ist:

kürzeste. Ähnlich wie here. Es ist auch minimal: Die Tabelle im DIV ist orthogonal zu Ihrer Frage.
schnellste: getElementById heißt einmal am Anfang. Dies kann oder kann nicht für Ihre Zwecke geeignet sein.
Es verwendet reines JavaScript (d. H. Ohne JQuery).
Es verwendet eine button. Ihr Geschmack kann variieren.
erweiterbar: Es ist bereit, weitere DIVs hinzuzufügen und den Code zu teilen.

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>

Quelle

2017-06-26 20:29:46 Calaf

Wie kann ich ein Div anzeigen/ausblenden, wenn auf eine Schaltfläche geklickt wird?

Antwort

Verwandte Themen