HTML-Schaltflächen ausblenden und mit Onclick anzeigen

1. Verwenden Sie die CSS-Eigenschaft display, um die versteckten Schaltflächen in HTML anzuzeigen
2. Verwenden Sie die jQuery-Methode show(), um die versteckten Schaltflächen in HTML anzuzeigen

Dieses Tutorial stellt einige Methoden vor, um die HTML-Buttons auszublenden und sie mit dem onclick-Event sichtbar zu machen.

Verwenden Sie die CSS-Eigenschaft display, um die versteckten Schaltflächen in HTML anzuzeigen

Wir können einen HTML-Button zunächst ausblenden, indem wir seine Eigenschaft display auf none setzen. Dann können wir die Eigenschaft display mit JavaScript auf inline oder block setzen.

Die Anzeigeeigenschaft inline oder block zeigt die versteckten HTML-Buttons an. Der Unterschied zwischen display: inline und display: block besteht darin, dass die Inline-Komponente zwei oder mehr Komponenten in einer Zeile oder Reihe haben kann.

Aber block-Komponenten können nur eine Komponente in einer Zeile oder Reihe haben.

Erstellen Sie beispielsweise eine Schaltfläche und nennen Sie sie Anzeigen. Setzen Sie das onclick-Attribut des Buttons auf makeChange().

Die Funktion makeChange() wird mit Klick auf die Schaltfläche Show aufgerufen. Erstellen Sie dann die anderen drei Schaltflächen und nennen Sie sie Button1, Button2 und Button3.

Legen Sie die id von Button1 als b1, Button2 als b2 und Button3 als b3 fest. Wählen Sie in CSS die Schaltflächen anhand ihrer id aus und setzen Sie die Eigenschaft display auf none.

Als nächstes erstellen Sie in JavaScript eine Funktion makeChange(). Setzen Sie innerhalb dieser Funktion die Anzeigeeigenschaft jeder Schaltfläche auf blockieren.

Wählen Sie die spezifische Schaltfläche anhand ihrer id als document.getElementById("b1") für die erste Schaltfläche aus. Stellen Sie dann die Anzeige ein, indem Sie document.getElementById("b1")style.display auf block zuweisen.

Wiederholen Sie es für die anderen beiden Tasten.

Beispielcode:

<button onclick="makeChange();">Show</button>
<button id="b1">Button1</button>
<button id="b2">Button2</button>
<button id="b3">Button3</button>

#b1, #b2, #b3 {
display: none;
}

function makeChange() {
  document.getElementById('b1').style.display = 'block';
  document.getElementById('b2').style.display = 'block';
  document.getElementById('b3').style.display = 'block';
}

Verwenden Sie die jQuery-Methode show(), um die versteckten Schaltflächen in HTML anzuzeigen

Wir können auch die jQuery-Funktion show() verwenden, um die versteckten HTML-Elemente anzuzeigen. Die Funktion show() zeigt nur die ausgewählten HTML-Komponenten an, deren Property display auf none gesetzt ist.

Es funktioniert nicht bei HTML-Elementen, deren Eigenschaft visibility auf none gesetzt ist. Wir verwenden die gleiche Methode wie oben, um die Schaltflächen auszublenden.

Wir werden auch die in der obigen Methode verwendete HTML-Struktur wiederverwenden.

Nachdem Sie die Eigenschaft display des Buttons auf none gesetzt haben, erstellen Sie eine makeChange()-Funktion in JavaScript. Wählen Sie innerhalb der Funktion die Schaltflächen mit ihrer id aus und rufen Sie die jQuery-Methode show() als $('#b1, #b2, #b3').show() auf.

Wenn Sie auf die Schaltfläche Anzeigen klicken, werden die ausgeblendeten Schaltflächen angezeigt. So können wir die jQuery-Methode show() verwenden, um die versteckten Schaltflächen in HTML anzuzeigen.

Beispielcode:

<button onclick="makeChange();">Show</button>
<button id="b1">Button1</button>
<button id="b2">Button2</button>
<button id="b3">Button3</button>

#b1, #b2, #b3 {
    display: none;
}

function makeChange() {
  $('#b1, #b2, #b3').show();
}