Maison > Article > interface Web > Partage de code JS pour implémenter une fonction de commutation de clic d'étiquette simple

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

小云云original: 2018-02-07 11:51:541250parcourir

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>

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!

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：Un moyen simple de rediriger les routes JSArticle suivant：Un moyen simple de rediriger les routes JS

Articles Liés

Voir plus