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

Méthode JS pour implémenter la commutation du cycle de clics pour afficher le contenu

韦小宝
Libérer: 2018-01-11 10:14:39
original
2168 Les gens l'ont consulté

Cet article présente principalement la méthode de JS pour réaliser le changement de cycle de clic pour afficher le contenu, impliquant la réponse aux événements de souris javascript et les compétences opérationnelles associées telles que l'obtention d'éléments de page et la définition d'attributs. peut se référer à ce qui suit Cet article

L'exemple de cet article décrit la méthode d'utilisation de JS pour réaliser la commutation du cycle de clics pour afficher le contenu. 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 lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.php.cn 点击循环切换内容</title>
  <style>
    a {
      cursor: pointer;
      color: red;
    }
    p {
      display: none;
    }
  </style>
</head>
<body>
  <a onclick="con()">循环切换内容</a>
  <p>11111</p>
  <p>22222</p>
  <p>33333</p>
  <script>
    //可以换成切换图片等等
    flag = 0;
    pre = 0;
    function con(){
      var cons = document.getElementsByTagName("p");
      document.getElementsByTagName("p")[pre].style.display = "none";
      document.getElementsByTagName("p")[flag].style.display = "inline";
      console.log(flag);
      pre = flag;
      if(flag == cons.length - 1) { //注意是cons.length-1,因为索引值是从0开始的
        flag = 0;
      } else {
        ++flag;
      }
    }
  </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 sera utile à tous ceux qui apprennent le js !

Recommandations associées :

Exemples détaillés de suppression JS de toutes les virgules dans les chaînes

Implémentation JS du déplacement d'éléments vers le haut, le bas, la gauche et à droite

JS cliquez sur le lien pour basculer vers l'affichage du contenu caché

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