Maison > Article > interface Web > Tutoriel sur l'implémentation de la fonction de commutation de contenu des balises js et css

Tutoriel sur l'implémentation de la fonction de commutation de contenu des balises js et css

小云云original: 2018-01-27 11:18:451349parcourir

Cet article partage principalement avec vous js + css pour réaliser la fonction de changement de contenu d'étiquette (explication avec exemples). Nous attachons d'abord les rendus et vous enseignons avec un exemple de code, dans l'espoir de vous aider.

Joignez d'abord les rendus et le code :

html document :

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

js document :

/**
 * 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;
  };
 }
}

Mécanisme de principe

À propos de l'effet de superposition des classes en CSS.

Nous savons que plusieurs noms de classes peuvent être ajoutés à un élément et que les styles de plusieurs classes seront mis en cascade et affichés en même temps.

Par exemple :

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

Comme vous pouvez le constater, first Dans l'attribut de classe de chaque li, il y a deux noms de classe : .list-item et .list-item-checked. Alors cet élément li aura les styles de ces deux classes en même temps.

En comparaison, les deuxième et troisième classes li n'ont que : .list-item. Ils n'auront donc pas les styles définis par .list-item-checked.

Retournez au sujet et changez d'étiquette. En fait, vous récupérez l'élément puis modifiez le style de l'élément. Ensuite, le style de l'élément peut être contrôlé par "classList" pour contrôler le nom de classe de l'élément, modifiant ainsi le style.

Une brève introduction à la méthode classList.

1. element.classList obtient simplement la liste des noms de classe des éléments.

2. element.clasList.add(value); Cette méthode ajoute le nom de classe spécifié à la liste des noms de classe de l'élément

3. consiste à supprimer le nom de classe spécifié de la liste des noms de classe de l'élément

4. element.classList.contains(value); Cette méthode consiste à déterminer si le nom de classe spécifié existe dans la liste des noms de classe de l'élément ; Renvoie une valeur booléenne

5. element.classList.toggle(value); Cette méthode consiste à déterminer si le nom de classe spécifié existe dans la liste des noms de classe de l'élément. S'il existe, supprimez le nom de classe if ; not S'il existe, ajoutez le nom de la classe

où la valeur de "value" peut être une variable ou une constante de chaîne

 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); // 有则删，无则添；

partie js

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

1. >

La valeur initiale de "e_mark" est "0". Indique que "e_mark" pointe vers l'élément actuellement sélectionné avec le numéro "0".

e_mark = 0;

2. La fonction des « tabs[i].num=i » :

Dans la boucle for supérieure, la valeur de "i" est en fait la valeur en indice de chaque élément du tableau "tabs". Parce que la valeur de "i" ne peut pas être obtenue directement dans des fonctions anonymes d'événements telles que "onclick". En d'autres termes, lorsqu'un élément est cliqué, la fonction déclenchée ne peut pas savoir quel élément du tableau "onglets" a été cliqué, car chaque élément peut déclencher cette fonction. Cependant, la fonction peut utiliser "this" pour savoir sur quel élément a été cliqué. Quant au numéro de l'élément cliqué, il peut être obtenu grâce à une valeur personnalisée de l'élément cliqué.

tabs[i].num = i;

Avant de cliquer sur les éléments, nous lions d'abord un numéro à ces éléments : num (valeur personnalisée), puis nous pouvons obtenir le numéro de cet élément via "this.num". Vous savez également quel élément se trouve cet élément dans le tableau "onglets".

3. Modifier le style de l'élément actuel et de l'élément mis à jour :

Comme mentionné ci-dessus, "e_mark" est le numéro de l'élément actuel et "this.num" est le numéro de l'élément cliqué et nouvellement sélectionné.

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

Ensuite, lorsque l'élément est cliqué, deux choses doivent être faites : 1. Restaurer le style de l'élément actuellement sélectionné au style normal, 2. Modifier le style de l'élément cliqué à celui lorsqu'il était style sélectionné.

Combiné avec la méthode classList, nous savons : .list-item-checked est le style ajouté lorsqu'il est sélectionné. L'élément sélectionné n'a besoin que d'ajouter ce nom de classe, tandis que l'élément non sélectionné supprimera ce nom de classe.

Recommandations associées :

Implémentation JS de compétences alternatives en matière de changement de contenu Web à effet accordéon

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!

css html 常量 for 字符串常量字符串循环 class JS 事件 this li

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：Méthode de mise en œuvre de l'algorithme de permutation et de combinaison complète JSArticle suivant：Méthode de mise en œuvre de l'algorithme de permutation et de combinaison complète JS

Articles Liés

Voir plus