Maison > Article > interface Web > Exemple de fonction de commutation de clic d'étiquette simple implémentée dans JS

Exemple de fonction de commutation de clic d'étiquette simple implémentée dans JS

韦小宝original: 2018-01-15 11:19:021318parcourir

Cet article présente principalement la fonction de changement de clic d'étiquette simple implémentée par JS, impliquant une réponse événement javascript et la traversée des éléments de page, une transformation dynamique d'attribut et d'autres compétences opérationnelles connexes. Les amis intéressés par js peuvent se référer à. le suivant Cet 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>www.jb51.net 脚本之家</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>

Ce qui précède est tout le contenu de cet article ! ! J'espère que cela aidera tout le monde à apprendre ! !

Recommandations associées :

Partage d'exemples de développement réactif utilisant rem en javascript

Une brève discussion sur la différence entre Ajax et JavaScript

Javascript convertit le chemin absolu de l'image en codage base64

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 de l'imbrication de la boîte modale bootstrap et des attributs tabindexArticle suivant：Explication détaillée de l'imbrication de la boîte modale bootstrap et des attributs tabindex

Articles Liés

Voir plus