How to implement JS click cycle to switch display content-JS Tutorial-php.cn

How to implement JS click cycle to switch display content

黄舟

Release： 2017-10-19 10:39:16

Original

1697 people have browsed it

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 in need can refer to this article

The example 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:

Let’s take a look at the running effect first:

The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 点击循环切换内容</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>

Copy after login

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