Maison > interface Web > js tutoriel > le corps du texte

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

韦小宝
Libérer: 2018-01-15 11:19:02
original
1314 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!