Maison > Article > interface Web > js implémente le code de commutation de clic d'étiquette (code ci-joint)

js implémente le code de commutation de clic d'étiquette (code ci-joint)

php中世界最好的语言original: 2018-04-18 10:07:321920parcourir

Cette fois, je vais vous apporter js pour implémenter le code de changement de clic d'étiquette (avec code). Quelles sont les précautions pour que js implémente le changement de clic d'étiquette. code ? Ce qui suit est un cas pratique, jetons un coup d'œil.

En ce qui concerne les sites Web, je pense que beaucoup de gens sont très conscients du fait qu'il existe de nombreuses balises sur le site Web qui changeront à chaque fois qu'elles seront cliquées. Alors, est-ce que quelqu'un sait comment cet effet est obtenu ? L'article suivant vous présentera comment implémenter le changement de clic d'étiquette dans js. Vous pouvez en apprendre davantage sur l'exemple de code d'implémentation spécifique dans l'article.

L'exemple de cet article décrit la simple fonction de changement de clic d'étiquette implémentée par JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style-type: none;
    }
    .box {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      overflow: hidden;
    }
    .hd {
      height: 45px;
    }
    .hd span {
      display: inline-block;
      width: 90px;
      background-color: pink;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
    }
    .hd span.current {
      background-color: yellowgreen;
    }
    .bd li {
      height: 255px;
      background-color: yellowgreen;
      display: none;
    }
    .bd li.current {
      display: block;
      font-size: 36px;
    }
  </style>
</head>
<body>
<p class="box" id="box">
  <p class="hd">
    <span class="current">体育</span>
    <span>娱乐</span>
    <span>新闻</span>
    <span>综合</span>
  </p>
  <p class="bd">
    <ul>
      <li class="current">我是体育模块</li>
      <li>我是娱乐模块</li>
      <li>我是新闻模块</li>
      <li>我是综合模块</li>
    </ul>
  </p>
</p>
<script>
  var box = document.getElementById("box");
  var spans = box.getElementsByTagName("span");
  var lis = box.getElementsByTagName("li");
  for (var i = 0; i < spans.length; i++) {
    spans[i].aaa = i;
    spans[i].onclick = function () {
      for (var i = 0; i < spans.length; i++) {
        spans[i].className = "";
        lis[i].className = "";
      }
      this.className = "current";
      lis[this.aaa].className = "current";
    }
  }
</script>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment vue proxyTable implémente le débogage des requêtes inter-domaines de l'interface

Explication détaillée du paramètre vue+query passer les étapes

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!

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：Explication détaillée des étapes pour implémenter le saut d'itinéraire à l'aide de JSArticle suivant：Explication détaillée des étapes pour implémenter le saut d'itinéraire à l'aide de JS

Articles Liés

Voir plus