Javascript实现Tab切换

最新推荐文章于 2024-03-29 20:44:24 发布

DarkXionghaizi

最新推荐文章于 2024-03-29 20:44:24 发布

阅读量934

点赞数

分类专栏： Html/Javascript 文章标签： javascript 标签

本文链接：https://blog.csdn.net/darkxionghaizi/article/details/46803549

版权

Html/Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用javascript实现在Tab标签之间切换，通过点击Tab标签，显示出对应的内容。

<!--
--function:用javascript实现几个Tab标签间的切换。
-- created by:少数派力量_Mole
--date:7/08/15
 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html"  charset="UTF-8">
<style type = "text/css">
	ul {overflow:hidden; zoom:1; list-style-type:none; cursor:pointer;}<!--ul样式-->
	p {font-size:30px; color:red; text-align:center;}
	ul,li {padding:0px; margin:0px;}
	ul li {float:right; width:100px; height:35px; line-height:35px;border:1px #bbb solid;  
				text-align:center; border-bottom:none; background:#ccc;}
	ul li.fli {background:#fff; color:blue;}
	#tab_con {width:600px; height:600px;}
	#tab_con div {width:1024px; height:600px; background:#ccc; border:1px,#bbb; border-top:none;}
	#tab_con div.fdiv {background:#fff;}
</style>
<script type="text/javascript">
window.οnlοad=function()   //onload 事件句柄，文档装载结束时调用
{ 
	var tabs=document.getElementById("tab").getElementsByTagName("li");
	var divs=document.getElementById("tab_con").getElementsByTagName("div");
	divs[0].style.display = "block"; //加载时显示第一个标签的内容 
	for(var i=0;i<tabs.length;i++){
			tabs[i].οnclick=function(){//鼠标点击触发
				for(var i=0;i<tabs.length;i++)
				{
					if(tabs[i]==this){
						tabs[i].className="fli";//加载Tab样式
						divs[i].className="fdiv";//加载相应区域的样式
						divs[i].style.display = "block"; //使得对应点击标签的显示区域可见
					}
					else{
						tabs[i].className="";
						divs[i].className="";
						divs[i].style.display = "none"; //使得其他区域不可见
					}
				}
			}
	}
	

}
</script>
<title>十六进制颜色值</title>
</head>
<body>
<ul id="tab">
	<li class="fli">first</li>
	<li>second</li>
	<li>third</li>
</ul>

<div id="tab_con" align="center" >
	<div class="fdiv"  align="center">first area</div>
	<div>second area</div>
	<div>third area</div>
</div>

</body>
</html>

代码测试截图：