简单的选项卡切换

最新推荐文章于 2020-08-13 15:10:43 发布

泛泛之辈Leo

最新推荐文章于 2020-08-13 15:10:43 发布

阅读量340

点赞数

本文链接：https://blog.csdn.net/cheng621/article/details/23944547

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>简单的选项卡切换</title>
<style>
#mydiv div{ width:200px; height:300px; background:#CFC; font-size:16px; display:none}
#mydiv ul{ width:200px; height:30px; margin:0px 0px;}
#mydiv ul li{ float:left; width:30px; height:30px; border:1px solid #666; list-style-type:none; cursor:pointer;}
#mydiv ul .active{ background:red}
</style>
<script>
var li;
var mydiv;
var oDiv ;
var timer;
var currentIndex = 1;
window.onload = function(){
	mydiv = document.getElementById("mydiv");
	li= mydiv.getElementsByTagName("li");
	oDiv= mydiv.getElementsByTagName("div");
	
	for(var i =0;i<li.length;i++){
		li[i].index = i;
		li[i].onmouseover = function(){
			changeDiv(this.index+1);
			stop();
		   }
		   li[i].onmouseout = function(){
			start();
		   }
	}
	start();	
};
function start(){
	timer = setInterval(timer_tick,1000);
	}
function timer_tick(){
	currentIndex = currentIndex>=li.length?1:currentIndex+1;
	changeDiv(currentIndex);
}
function changeDiv(i){
	currentIndex = i;
	for(var j =0;j<li.length;j++){
		if((i-1)==j){
			li[j].className="active";
			oDiv[j].style.display="block";
			}else{
				li[j].className="";
			oDiv[j].style.display="none";
				}
		}
}
function stop(){
	clearInterval(timer);
}
</script>

</head>
<body>
<div id="mydiv">
<ul>
<li class="active">a</li>
<li>b</li>
<li>c</li>
</ul>
<div style="display:block">aaaa</div>
<div>bbb</div>
<div>bbbb</div>
</div>


</body>
</html>

泛泛之辈Leo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的选项卡切换

简单的选项卡切换#mydiv div{ width:200px; height:300px; background:#CFC; font-size:16px; display:none}#mydiv ul{ width:200px; height:30px; margin:0px 0px;}#mydiv ul li{ float:left; width:30px; height:30px;
复制链接

扫一扫