Tutorial zur Implementierung der Funktion zum Wechseln von JS- und CSS-Tag-Inhalten-js-Tutorial-php.cn

In diesem Artikel werden hauptsächlich js + css mit Ihnen geteilt, um die Funktion zum Wechseln des Etiketteninhalts zu realisieren (Erklärung anhand von Beispielen). Wir hängen zunächst die Renderings an und unterrichten Sie anhand von Beispielcode, in der Hoffnung, Ihnen weiterzuhelfen.

Fügen Sie zuerst die Renderings und den Code hinzu:

html Dokument:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script type="text/javascript" src="../js/tabs_function.js"></script>
 <script type="text/javascript">
  window.onload = function main() {
   Tabs(".list-item", ".contents", "list-item-checked", "contents-checked");

  }
 </script>
 <style type="text/css">
  #list-title {
   width: 318px;
   height: 56px;
   margin: 0;
   list-style-type: none;
   padding-left: 0;
  }

  .list-item {
   float: left;
   width: 100px;
   height: 50px;
   margin: 2px;
   line-height: 50px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #000;
   cursor: pointer;
  }

  .list-item-checked {
   background-color: #70adff;
   color: #ffffff;
  }

  #content-box {
   position: relative;
   clear: both;
   width: 314px;
   height: 302px;
   margin: 0 2px;
  }

  .contents {
   position: absolute;
   left: 0;
   top: 0;
   width: 312px;
   height: 300px;
   margin: 0;
   font-size: 32px;
   line-height: 300px;
   text-align: center;
   border: 1px solid #000;
   z-index: 0;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
  }

  .contents-checked {
   z-index: 1;
   opacity: 1;
   visibility: visible;
  }
 </style>
</head>
<body>
<ul id="list-title">
 <li class="list-item list-item-checked">1</li>
 <li class="list-item">2</li>
 <li class="list-item">3</li>
</ul>
<p id="content-box">
 <p class="contents contents-checked" style="background-color: #c8ff40;">content_1</p>
 <p class="contents" style="background-color: #41ff6f;">content_2</p>
 <p class="contents" style="background-color: #ff82a0;">content_3</p>
</p>
</body>
</html>

Nach dem Login kopieren

js-Dokument:

/**
 * Created by Administrator on 2016/9/12.
 */

/*
 * tabs_name:用于触发事件的标签的类名；
 * contents_name:内容容器的类名；
 * tabs_checked_style:标签为选中状态时的样式；
 * contents_checked_style:内容容器为选中状态时的样式；
 *
 * classList.toggle();
 * 检查元素的类名列表中是否有指定的类名，如果有则移除，如果没有则添加；
 * */
function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
 var tabs = document.querySelectorAll(tabs_name),
  contents = document.querySelectorAll(contents_name),
  e_mark = 0;
 for (var i = 0, len = tabs.length; i < len; i++) {
  tabs[i].num = i;
  tabs[i].onclick = function () {
   tabs[e_mark].classList.toggle(tabs_checked_style);
   tabs[this.num].classList.toggle(tabs_checked_style);
   contents[e_mark].classList.toggle(contents_checked_style);
   contents[this.num].classList.toggle(contents_checked_style);
   e_mark = this.num;
  };
 }
}

Nach dem Login kopieren

Prinzipmechanismus

Über den Overlay-Effekt von Klassen in CSS.

Wir wissen, dass einem Element mehrere Klassennamen hinzugefügt werden können und die Stile mehrerer Klassen kaskadiert und gleichzeitig angezeigt werden.

Zum Beispiel:

.list-item {
   float: left;
   width: 100px;
   height: 50px;
   margin: 2px;
   line-height: 50px;
   font-size: 28px;
   text-align: center;
   border: 1px solid #000;
   cursor: pointer;
  }

  .list-item-checked {
   background-color: #70adff;
   color: #ffffff;
  }

Nach dem Login kopieren

Wie Sie sehen können, Zuerst gibt es im Klassenattribut jedes Li zwei Klassennamen: .list-item und .list-item-checked. Dann hat dieses li-Element gleichzeitig die Stile dieser beiden Klassen.

Im Vergleich dazu haben die zweite und dritte Li-Klasse nur: .list-item. Sie verfügen also nicht über die durch .list-item-checked festgelegten Stile.

Gehen Sie zurück zum Thema und wechseln Sie die Beschriftung. Tatsächlich erhalten Sie das Element und ändern dann den Stil des Elements. Anschließend kann der Elementstil über „classList“ gesteuert werden, um den Klassennamen des Elements zu steuern und dadurch den Stil zu ändern.

Eine kurze Einführung in die classList-Methode.

1. element.classList ruft nur die Liste der Klassennamen von Elementen ab.

2. element.clasList.add(value); Diese Methode fügt den angegebenen Klassennamen zur Klassennamenliste des Elements hinzu

3 soll den angegebenen Klassennamen aus der Klassennamenliste des Elements löschen

4. Diese Methode dient dazu, festzustellen, ob der angegebene Klassenname in der Klassennamenliste des Elements vorhanden ist Gibt einen booleschen Wert zurück

5. Mit dieser Methode wird ermittelt, ob der angegebene Klassenname in der Klassennamenliste vorhanden ist nicht Wenn vorhanden, fügen Sie den Klassennamen

hinzu, wobei der Wert von „value“ eine Variable oder eine Zeichenfolgenkonstante sein kann

 element.classList.add("class-name"); // 字符串
 element.classList.add(class_name); // 变量
 
 element.classList.remove(class_name);
 element.classList.contains(class_name); // true,false
 element.classList.toggle(class_name); // 有则删，无则添；

Nach dem Login kopieren

js-Teil

e_mark = 0;
 for (var i = 0, len = tabs.length; i < len; i++) {
  tabs[i].num = i;
  tabs[i].onclick = function () {
   tabs[e_mark].classList.toggle(tabs_checked_style);
   tabs[this.num].classList.toggle(tabs_checked_style);
   contents[e_mark].classList.toggle(contents_checked_style);
   contents[this.num].classList.toggle(contents_checked_style);
   e_mark = this.num;
  };
 }

Nach dem Login kopieren

1. Die Rolle von „e_mark“:

e_mark = 0;

Nach dem Login kopieren

Der Anfangswert von „e_mark“ ist „0“. Zeigt an, dass „e_mark“ auf das aktuell ausgewählte Element mit der Nummer „0“ zeigt.

2. Die Funktion von „tabs[i].num=i“:

tabs[i].num = i;

Nach dem Login kopieren

In der oberen for-Schleife ist der Wert von „i“ tatsächlich der tiefgestellte Wert jedes Elements im „tabs“-Array. Denn der Wert von „i“ kann in anonymen Ereignisfunktionen wie „onclick“ nicht direkt ermittelt werden. Mit anderen Worten: Wenn auf ein Element geklickt wird, kann die ausgelöste Funktion nicht wissen, auf welches Element im Array „tabs“ geklickt wurde, da jedes Element diese Funktion auslösen kann. Die Funktion kann jedoch mithilfe von „this“ ermitteln, auf welches Element geklickt wurde. Die Nummer des angeklickten Elements kann über einen benutzerdefinierten Wert des angeklickten Elements ermittelt werden.

Bevor auf die Elemente geklickt wird, binden wir zunächst eine Zahl an diese Elemente: num (benutzerdefinierter Wert), dann können wir die Nummer dieses Elements über „this.num“ abrufen. Sie wissen auch, um welches Element es sich im Array „tabs“ handelt.

3. Ändern Sie den Stil des aktuellen Elements und des aktualisierten Elements:

tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style);

Nach dem Login kopieren

Wie oben erwähnt, ist „e_mark“ die Nummer des aktuellen Elements und „this.num“ die Nummer des angeklickten und neu ausgewählten Elements.

Wenn dann auf das Element geklickt wird, müssen zwei Dinge getan werden: 1. Stellen Sie den Stil des aktuell ausgewählten Elements auf den normalen Stil wieder her, 2. Ändern Sie den Stil des angeklickten Elements in den ursprünglichen Stil Stil ausgewählt.

In Kombination mit der classList-Methode wissen wir: .list-item-checked ist der Stil, der bei Auswahl hinzugefügt wird. Das ausgewählte Element muss nur diesen Klassennamen hinzufügen, während das nicht ausgewählte Element diesen Klassennamen entfernt.

Verwandte Empfehlungen:

JS-Implementierung alternativer Akkordeon-Effekt-Webinhaltswechselcode_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonTutorial zur Implementierung der Funktion zum Wechseln von JS- und CSS-Tag-Inhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!