JavaScript-Implementierung des Tab-Click-Switching-Beispielcodes für die gemeinsame Nutzung (Bild und Text)

Tab-Wechseleffekte werden auf heutigen Webseiten häufig verwendet, darunter Klickwechsel, Schiebewechsel, verzögerter Wechsel, automatischer Wechsel und andere Effekte. In diesem Blogbeitrag verwenden wir natives JavaScript, um den Effekt zu erzielen Tab-Klick-Umschaltung.

Tab-Wechseleffekte werden auf heutigen Webseiten häufig verwendet, einschließlich Klickwechsel, Schiebewechsel, verzögertes Wechseln, automatisches Wechseln und andere Effekte. In diesem Blogbeitrag werden wir den Effekt des Tab-Klickwechsels durch natives Javascript erkennen

1. Funktionsimplementierung

html Teil

<button style="background-color:#f60; color: #fff;">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<p style="display:block;">第一个Nian糕</p>
<p>第二个Nian糕</p>
<p>第三个Nian糕</p>

css Teil

p {
 display: none;
 width: 155px;
 height: 100px;
 border: 1px solid #000;
}

Als nächstes kommt der JS-Teil, der in jedem Schritt in Code umgewandelt wird. Wann immer wir einen Effekt erzielen möchten, denken Sie nicht zuerst darüber nach wie man es umsetzt, wie die Struktur aussieht, welche Ereignisse für eine bestimmte Funktion benötigt werden usw. Gehen Sie den gesamten Prozess im Kopf durch und gehen Sie dann jeden Schritt durch in Code

a. Holen Sie sich das Element

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

Hinweis: document.getElementsByTagName gibt ein [array-ähnliches Objekt] zurück, Sie können die Array-Methoden zur Verarbeitung verwenden es, aber Array-ähnliche Objekte verfügen nicht über die Methoden, die Arrays haben

b Binden Sie Klickereignisse an Elemente

//第一个按钮的点击事件
btnList[0].onclick = function () {
 btnList[0].style.color = "#fff";
 btnList[0].style.backgroundColor = "#f60";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";
 pList[0].style.display = "block";    
 pList[1].style.display = "none";    
 pList[2].style.display = "none";    
}

//第二个按钮的点击事件
btnList[1].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "#fff";
 btnList[1].style.backgroundColor = "#f60";
 btnList[2].style.color = "";
 btnList[2].style.backgroundColor = "";  
 pList[0].style.display = "none";    
 pList[1].style.display = "block";    
}

//第三个按钮的点击事件
btnList[2].onclick = function () {
 btnList[0].style.color = "";
 btnList[0].style.backgroundColor = "";
 btnList[1].style.color = "";
 btnList[1].style.backgroundColor = "";
 btnList[2].style.color = "#fff";
 btnList[2].style.backgroundColor = "#f60";
 pList[0].style.display = "none";    
 pList[1].style.display = "none";    
 pList[2].style.display = "block";  
}

Jetzt Wir haben einen Tab-Wechseleffekt implementiert. Schauen wir uns den Effekt an

Obwohl es sehr einfach ist, hat es den gewünschten Effekt erzielt Als nächstes müssen wir den JS-Code optimieren

Das Element

b Bindet das Klickereignis an jedes Schaltflächenelement

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

index gibt die Zeichenposition zurück, die

ist Suchen Sie nach der Startposition der ersten erfolgreichen Übereinstimmung in der

for(var i = 0; i < btnList.length; i++ ) {
 btnList[i].index = i; //给每个按钮添加index属性，标记是第几个按钮
 btnList[i].onclick = function() {
  for(var j = 0; j < btnList.length; j++) {
   //将所有的按钮样式去掉，块隐藏
   btnList[j].style.color = "";
   btnList[j].style.backgroundColor = "";
   pList[j].style.display = "none";
  }
  //给点击的按钮添加样式，对应的块显示
  this.style.color = "#fff";
  this.style.backgroundColor = "#f60";
  pList[this.index].style.display = "block";
 }
}

Zeichenfolge , beginnend bei Null Dies ist ein Schlüsselwort in Javascript, das die Funktion

Beim Ausführen darstellt , ein automatisch generiertes

internes Objekt kann dies nur innerhalb der Funktion verwenden. Der Wert davon ändert sich entsprechend den verschiedenen Verwendungsszenarien der Funktion, aber wir müssen uns nur an ein Prinzip erinnern. Okay, das bezieht sich auf das Objekt, das die Funktion aufruft Hier zeigt dies auf die entsprechende Klickschaltfläche. Wir können den dadurch ausgegebenen Inhalt durch Konsolendruck sehen

3. Let-Befehl

In ES 6 wird ein neuer

-Befehl zu

hinzugefügt, der zum Deklarieren von Variable <🎜 verwendet wird >, seine Verwendung ähnelt , aber die deklarierte Variable ist nur innerhalb des Codeblocks gültig, in dem sich der let -Befehl befindet var let

Im Im obigen Code deklarieren wir zwei Variablen mit bzw.
im Codeblock und geben diese beiden Variablen dann innerhalb und außerhalb des Codeblocks aus. Sie können sehen, dass die mit

deklarierte Variable den korrekten Wert zurückgibt wird innerhalb des Codeblocks gedruckt. Die durch

deklarierte Variable gibt den korrekten Wert zurück, während die durch var deklarierte Variable außerhalb des Codeblocks gedruckt wird und ein Fehler gemeldet wird. Dies zeigt, dass die durch let deklarierte Variable nur ist im Codeblock, in dem sie sich befindet. Gültig var letlet let

Im obigen Code wird die Variable deklariert von
und ist im globalen Bereich gültig. Es gibt also nur eine Variable

auf der Welt. Bei jeder

-Schleife i ändert sich der Wert der Variablen var zum Array i in der Schleife wird zur Laufzeit geschlossen. Das Paket liest dieselbe Variable , was dazu führt, dass die endgültige Ausgabe der Wert der letzten Runde von ist, also 10. Wenn i Wird verwendet, ist die deklarierte Variable nur innerhalb des Bereichs auf Blockebene gültig und die endgültige Ausgabe ist 6 a function ia. Holen Sie sich das Element i let

b. Binden Sie das Klickereignis an jedes Schaltflächenelement

var btnList = document.getElementsByTagName("button");
var pList = document.getElementsByTagName("p");

In ähnlicher Weise verwenden wir auch die Konsole, um den Wert von i auszudrucken

Ende der Datei

Es ist unvermeidlich, dass beim Schreiben Fehler oder Mängel auftauchen. Ich hoffe, dass mich jeder korrigieren kann Um nicht noch mehr Menschen in die Irre zu führen, hoffe ich auch, dass jeder Script House unterstützt.

Das obige ist der detaillierte Inhalt vonJavaScript-Implementierung des Tab-Click-Switching-Beispielcodes für die gemeinsame Nutzung (Bild und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!