suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der JS-Implementierung der Tab-Beispiele_Javascript-Kenntnisse

Detaillierte Erläuterung der JS-Implementierung der Tab-Beispiele_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:31:501656Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Tabs in JS implementiert werden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Idee: Die Registerkarte besteht darin, auf die Schaltfläche zu klicken, um zum entsprechenden Inhalt zu wechseln. Tatsächlich besteht sie darin, auf die Schaltfläche zu klicken, um den Inhalt durch die Anzeige zu wechseln (keine Blockierung).

1. Holen Sie sich zuerst das Element.

2. Die for-Schleife durchläuft die Schaltflächenelemente, um onclick- oder onmousemove-Ereignisse hinzuzufügen.

3. Da die aktuelle Schaltfläche beim Klicken hervorgehoben angezeigt wird, müssen alle Schaltflächenstile über eine for-Schleife auf „leer“ und die Anzeige aller DIVs auf „Keine“ gesetzt werden.

4. Fügen Sie der aktuellen Schaltfläche einen Stil hinzu, zeigen Sie das aktuelle DIV an und stellen Sie die Anzeige auf Blockieren ein.

Hinweis: Um mehrere Ereignisse zu mehreren Elementen hinzuzufügen, müssen Sie eine for-Schleife verwenden, um sie zu durchlaufen. Wenn die Registerkarte durch Klicken umgeschaltet wird, sind die aktuelle Schaltflächenhöhe, der Klick und die Schaltflächenhervorhebung zwei Ereignisse, daher werden zwei for-Schleifen verwendet, um sie zu durchlaufen.

HTML-Code: 

<div id="box">
 <input type="button" value="1" />
 <input type="button" value="2" />
 <input type="button" value="3" />
 <input type="button" value="4" />
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

JS-Code: 

<script>
 window.onload=function(){
  var box=document.getElementById('box');
  var input=box.getElementsByTagName('input');
  var div=box..getElementsByTagName('div');
  for(var i=0;i<input.length;i++){ //循环历遍onclick事件
   input[i].index=i; //input[0].index=0 index是自定义属性
   input[i].onclick=function(){
    for(var i=0;i<input.length;i++){ //循环历遍去掉button样式和把div隐藏
     input[i].className='';
     div[i].style.display='none';
    };
    this.className='active'; //当前按钮添加样式
    div[this.index].style.display='block'; //div显示 this.index是当前div 即div[0]之类的
   };
  };
  };
</script>

Zusätzlich: Komplette Schritte zum Schreiben einfacher Tabulatoren mit js

Wie im Bild gezeigt, der einfachste reine Tab

Der erste Schritt besteht natürlich darin, den HTML-Code und den CSS-Stil zu schreiben 

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

Der zweite Schritt besteht darin, einen einfachen Schalteffekt zu erzielen

Punkt 1: abc.document.getElementsByTagName("li"): Ruft alle Elemente mit dem Tag li unter abc ab. Zurückgegeben wird eine Sammlung von Elementen mit einigen Attributen des Arrays.

Punkt 2: Schleife, erste Schleife, um das onclick-Ereignis zu li hinzuzufügen, und dann, wenn auf das onlink-Ereignis geklickt wird, erneute Schleife, um den Aktstil aller Registerkarten zu entfernen und den gesamten Inhalt auszublenden. Lassen Sie dann die angeklickte Option und den entsprechenden Inhalt anzeigen.

Punkt 3: tab_t_li[i].index = i; Fügen Sie beim Schleifen ein zusätzliches Attribut zum Tab hinzu und weisen Sie einen Wert zu, der zum Tab und zum Inhalt passt. 

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
 var tab_t = document.getElementById("tab_t");
 var tab_t_li = tab_t.getElementsByTagName("li");
 var tab_c = document.getElementById("tab_c");
 var tab_c_li = tab_c.getElementsByTagName("div");
 var len = tab_t_li.length;
 var i=0;
 for(i=0; i<len; i++){
  tab_t_li[i].index = i;
  tab_t_li[i].onclick = function(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[this.index].className = 'act';
   tab_c_li[this.index].className = '';
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

Der dritte Schritt besteht darin, es als Funktion zu schreiben. Die obige Schreibmethode kann nur eine Registerkarte pro Seite verwenden. Wenn Sie eine weitere hinzufügen, müssen Sie eine Kopie erstellen und viele Variablennamen ändern.

Wichtige Punkte: tab_t_li[i][evt] Da der Wert als Zeichenfolge übergeben wird, ist er tab_t_li[i], wenn er direkt geschrieben wird. „onclick“ kann nicht so ausgeführt werden, aber tab_t_li[“ onclick"] so ausgeführt werden? Frage.

Okay, jetzt können Sie mehrere Schalter auf einer Seite haben. Sie müssen beim Aufrufen der Funktion nur noch den entsprechenden ID-Namen, Tag-Namen und Ereignisnamen eingeben 

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
 tab("tab_t","li","tab_c","div","onmouseover")
 function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
  var tab_t = document.getElementById(tab_t);
  var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
  var tab_c = document.getElementById(tab_c);
  var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
  var len = tab_t_li.length;
  var i=0;
  for(i=0; i<len; i++){
   tab_t_li[i].index = i;
   tab_t_li[i][evt] = function(){
    for(i=0; i<len; i++){
     tab_t_li[i].className = '';
     tab_c_li[i].className = 'hide';
    }
    tab_t_li[this.index].className = 'act';
    tab_c_li[this.index].className = '';
   }
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Anpassbarer Web-Online-Rich-Text-Editor basierend auf Jquery mit Quellcode download_jqueryNächster Artikel：Anpassbarer Web-Online-Rich-Text-Editor basierend auf Jquery mit Quellcode download_jquery

In Verbindung stehende Artikel

Mehr sehen