Home > Article > Web Front-end > JS method to implement click cycle switching to display content

JS method to implement click cycle switching to display content

韦小宝Original: 2018-01-11 10:14:392157browse

This article mainly introduces the method of JS to realize click cycle switching to display content, involving javascript mouse event response, acquisition of page elements, attribute setting and other related operation skills. Friends who are familiar with js can refer to the following This article

The example of this article describes the method of using JS to switch the display content by clicking in a loop. Share it with everyone for your reference, the details are as follows:

The specific code is as follows:

<!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>

The above is all the content of this article. I hope it will be helpful to everyone learning js!

Related recommendations:

JS to remove all commas in a string Example detailed explanation

JS to move elements up, down, left, and right

JS click on the link to switch to display hidden content

The above is the detailed content of JS method to implement click cycle switching to display content. For more information, please follow other related articles on the PHP Chinese website!

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How vue-cli introduces the bootstrap toolNext article：How vue-cli introduces the bootstrap tool

See more

JS method to implement click cycle switching to display content

Related articles