Partage de code JS pour implémenter une fonction de commutation de clic d'étiquette simple-js tutoriel-php.cn

Partage de code JS pour implémenter une fonction de commutation de clic d'étiquette simple

小云云

Libérer： 2018-02-07 11:51:54

original

1285 Les gens l'ont consulté

Cet article présente principalement la simple fonction de changement de clic d'étiquette implémentée par JS, impliquant la réponse aux événements javascript, la traversée des éléments de page, la transformation dynamique des attributs et d'autres compétences opérationnelles connexes. Les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde <.>

Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.php.cn</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

Recommandations associées :

Implémentation Jquery de l'agrandissement d'image et du changement de clic partage d'exemple de fonction

Méthode JavaScript pour réaliser l'effet de changement de clic de plusieurs calques qui se chevauchent

JavaScript pour réaliser un exemple de partage de code de changement de clic d'onglet (image et texte)

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!