Home >Web Front-end >JS Tutorial >JS implements click cycle switching to display content

JS implements click cycle switching to display content

小云云Original: 2018-01-09 11:20:182329browse

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>

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!

JavaScript node.js 循环 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 to solve the problem that the BootStrap modal box is not vertically centeredNext article：How to solve the problem that the BootStrap modal box is not vertically centered

See more

JS implements click cycle switching to display content

Related articles