JS—循环切换内容

最新推荐文章于 2020-11-24 15:14:09 发布

spfLinux

最新推荐文章于 2020-11-24 15:14:09 发布

阅读量978

点赞数

分类专栏： js 文章标签： js 循环切换内容

本文链接：https://blog.youkuaiyun.com/spfLinux/article/details/78224460

版权

js 专栏收录该内容

137 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		a {
			cursor: pointer;
			color: red;
		}
		p {
			display: none;
		}
	</style>
</head>
<body>
	<a οnclick="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) {
				flag = 0;
			} else {
				++flag;
			}
		}
	</script>
</body>
</html>

//这里要注意是cons.length-1，因为索引值是从0开始的