recherche

Maison >interface Web >js tutoriel >Explication détaillée de l'implémentation JS des onglets examples_javascript skills

Explication détaillée de l'implémentation JS des onglets examples_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:31:501656parcourir

L'exemple de cet article décrit comment implémenter les onglets dans JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Idée : L'onglet consiste à cliquer sur le bouton pour basculer vers le contenu correspondant. En fait, il s'agit de cliquer sur le bouton pour basculer le contenu via l'affichage (aucun blocage).

1. Obtenez d’abord l’élément.

2. La boucle for parcourt les éléments du bouton pour ajouter des événements onclick ou onmousemove.

3. Étant donné que le bouton actuel sera affiché en surbrillance lorsque vous cliquerez dessus, il est nécessaire de définir tous les styles de boutons sur vides et de définir l'affichage de tous les DIV sur aucun via une boucle for.

4. Ajoutez un style au bouton actuel, affichez le DIV actuel et définissez l'affichage sur bloquer.

Remarque : pour ajouter plusieurs événements à plusieurs éléments, vous devez utiliser une boucle for pour les parcourir. Si l'onglet est changé en cliquant, la hauteur actuelle du bouton, le clic et la mise en surbrillance du bouton sont deux événements, donc deux boucles for sont utilisées pour le parcourir.

Code HTML : 

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

Code JS : 

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

Supplémentaire : étapes complètes pour écrire un onglet simple avec js

Comme le montre l'image, l'onglet pur le plus simple

La première étape est bien sûr d'écrire le code html et le style css 

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

La deuxième étape consiste à obtenir un simple effet de commutation

Point 1 : abc.document.getElementsByTagName("li") : récupère tous les éléments avec la balise li sous abc. Ce qui est renvoyé est une collection d'éléments avec certains attributs du tableau.

Point 2 : boucle, première boucle pour ajouter l'événement onclick à li, puis lorsque l'utilisateur clique sur l'événement onlink, boucle à nouveau pour supprimer le style d'acte de tous les onglets et masquer tout le contenu. Laissez ensuite l’option cliquée et le contenu correspondant s’afficher.

Point 3 : tab_t_li[i].index = i; Lors d'une boucle, ajoutez un attribut supplémentaire à l'onglet et attribuez une valeur pour correspondre à l'onglet et au contenu. 

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

La troisième étape consiste à l'écrire sous forme de fonction. La méthode d'écriture ci-dessus ne peut utiliser qu'un seul onglet par page. Si vous en ajoutez un autre, vous devez en faire une copie et modifier de nombreux noms de variables.

Points clés : tab_t_li[i][evt] Parce que la valeur est passée sous forme de chaîne, si elle est écrite directement, elle sera tab_t_li[i]. "onclick" ne peut pas être exécuté comme ça, mais sera tab_t_li[" onclick"] être exécuté comme ça ? question.

D'accord, vous pouvez désormais avoir plusieurs commutateurs sur une seule page. Il vous suffit d'écrire le nom d'identification, le nom de la balise et le nom de l'événement correspondants lors de l'appel de la fonction 

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

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Éditeur de texte enrichi en ligne personnalisable basé sur jquery avec le code source download_jqueryArticle suivant：Éditeur de texte enrichi en ligne personnalisable basé sur jquery avec le code source download_jquery

Articles Liés

Voir plus