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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
