JS implements click cycle switching to display content-JS Tutorial-php.cn

JS implements click cycle switching to display content

小云云

Release： 2018-01-09 11:20:18

Original

2224 people have browsed it

This article mainly introduces the JS method of realizing click cycle switching to display content, involving JavaScript mouse event response, acquisition of page elements, attribute settings and other related operation skills. Friends in need can refer to it, I hope it can help everyone.

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

##The specific code is as follows:

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

Related recommendations:

JavaScript tutorial--click to cycle to switch pictures

Comprehensive examples of javascript picture switching (cycle switching, sequential switching)_javascript skills

Detailed explanation of event loop in JS and Node.js

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