js implémente des compétences simples effect_javascript à onglet commutable-js tutoriel-php.cn

js implémente des compétences simples effect_javascript à onglet commutable

WBOY

Libérer： 2016-05-16 16:04:55

original

1338 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter un simple effet d'onglet commutable dans js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

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>

Copier après la connexion

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

Point 1 :

abc.document.getElementsByTagName("li")

Copier après la connexion

Obtenez tous les éléments avec l'étiquette 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;

Copier après la connexion

Lors d'une boucle, ajoutez un attribut supplémentaire à l'onglet et attribuez une valeur correspondant à 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>

Copier après la connexion

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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.