Exemple de fonction de commutation de clic d'étiquette simple implémentée dans JS-js tutoriel-php.cn

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

韦小宝

Libérer： 2018-01-15 11:19:02

original

1331 Les gens l'ont consulté

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>

Copier après la connexion

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!