点击来回切换html内容,JS实现点击循环切换显示内容的方法

本文实例讲述了JS实现点击循环切换显示内容的方法。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

www.jb51.net 点击循环切换内容

a {

cursor: pointer;

color: red;

}

p {

display: none;

}

循环切换内容

11111

22222

33333

//可以换成切换图片等等

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;

}

}

希望本文所述对大家JavaScript程序设计有所帮助。