Maison > Article > interface Web > Méthode JS pour implémenter la commutation du cycle de clics pour afficher le contenu

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

韦小宝original: 2018-01-11 10:14:392141parcourir

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>

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!

JavaScript 字符串循环 JS 事件鼠标事件

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：Comment vue-cli présente l'outil d'amorçageArticle suivant：Comment vue-cli présente l'outil d'amorçage

Articles Liés

Voir plus