Implémentation JavaScript du partage de code d'exemple de changement de clic d'onglet (image et texte)

Les effets de changement d'onglets sont largement utilisés dans les pages Web d'aujourd'hui, notamment le changement de clic, le changement coulissant, le changement retardé, le changement automatique et d'autres effets. Dans cet article de blog, nous utilisons du JavaScript natif pour obtenir l'effet de. Changement de clic d'onglet.

Les effets de changement d'onglet sont largement utilisés dans les pages Web d'aujourd'hui, notamment la commutation par clic, la commutation coulissante, la commutation retardée, la commutation automatique et d'autres effets. Dans cet article de blog, nous réalisons l'effet du changement de clic par onglet via Javascript natif.

1. Implémentation de la fonction

html partie

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

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

Vient ensuite la partie JS Selon la fonction à implémenter à chaque étape, elle est convertie en code Chaque fois que l'on veut obtenir un effet, ne se précipite pas. Au lieu de taper du code, réfléchissez d'abord. comment le mettre en œuvre, à quoi ressemble la structure, quels événements sont nécessaires pour une certaine fonction, etc. Parcourez tout le processus dans votre esprit, puis parcourez chaque étape. Convertissez la logique en une étape. dans le code

a. Obtenez l'élément

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

Remarque : document.getElementsByTagName renvoie un [objet de type tableau], vous pouvez utiliser la méthode array pour traiter mais les objets de type tableau n'ont pas les méthodes dont disposent les tableaux

b Lier les événements de clic aux éléments

//第一个按钮的点击事件
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";  
}

Maintenant. nous avons implémenté un effet de changement d'onglet, jetons un coup d'œil à l'effet

Bien que ce soit très simple, il a obtenu l'effet souhaité, les lecteurs peuvent. définir le CSS en fonction du style qu'ils souhaitent. La prochaine chose que nous devons faire est d'optimiser le code JS

2 Optimisation

a. l'élément

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

b. Liez l'événement click à chaque élément de bouton

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";
 }
}

index renvoie la position du caractère, qui est Recherchez la position de départ de la première correspondance réussie dans la chaîne , en commençant à zéro

c'est un mot-clé en Javascript, qui représente la fonctionLors de l'exécution , un objet interne généré automatiquement ne peut l'utiliser qu'à l'intérieur de la fonction. La valeur de this changera en fonction des différents scénarios d'utilisation de la fonction, mais nous n'avons qu'à retenir un principe. l'objet qui appelle la fonction

Ici, cela pointe vers le bouton de clic correspondant. Nous pouvons voir le contenu généré par ceci via l'impression de la console

. 3. Let command

Dans ES 6, une nouvelle commande est ajoutée à let , qui est utilisée pour déclarer Variable , son utilisation est similaire à var, mais la variable déclarée n'est valide que dans le bloc de code où se trouve la commande let

Dans le au-dessus du code, nous déclarons deux variables avec var et let respectivement dans le bloc de code, puis imprimons ces deux variables à l'intérieur et à l'extérieur du bloc de code. Vous pouvez voir que la variable déclarée par var renvoie La valeur correcte est. imprimé dans le bloc de code. La variable déclarée par let renvoie la valeur correcte, tandis que la variable déclarée par let est imprimée en dehors du bloc de code et une erreur est signalée. Cela montre que la variable déclarée par let est uniquement. dans le bloc de code où elle se trouve Valid

Dans le code ci-dessus, la variable i est déclarée par. var et est valide dans la portée globale. Il n'y a donc qu'une seule variable i dans le monde À chaque fois que boucle , la valeur de la variable i changera et le a attribué. au tableau function dans la boucle sera fermé au moment de l'exécution. Le package lit la même variable i, ce qui fait que la sortie finale est la valeur du dernier tour de i, qui est 10. Si let est utilisé, la variable déclarée n'est valide que dans la portée au niveau du bloc et le résultat final est Ceux-là sont 6

a Obtenez l'élément

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

b. Liez l'événement click à chaque élément de bouton

for(let i = 0; i < btnLists.length; i++) {
 btnLists[i].onclick = function() {
  for(var j = 0;j < btnLists.length;j++){
   btnLists[j].style.color="";
   btnLists[j].style.backgroundColor="";
   pLists[j].style.display="none";
  }
  this.style.color = "yellow";
  this.style.backgroundColor="#f60";
  pLists[i].style.display="block";
 }
}

De même, nous utilisons également la console pour imprimer la valeur de i

Fin du dossier

Il est inévitable que des erreurs ou des lacunes apparaissent dans le processus d'écriture. J'espère que tout le monde pourra me corriger. Afin de ne pas induire davantage de monde en erreur, j'espère également que tout le monde soutiendra Script House.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!