Javascript实现Tab切换

原创 2015年07月08日 15:00:16

用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.onload=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].onclick=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>

代码测试截图:


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js(JavaScript)代码实现的TAB标签切换效果

一个可以js(JavaScript)的tab标签切换代码,可以自动适应宽度,可以自己添加删除标签块,傻瓜式操作便能完成! ...

【JavaScript实现Tab切换】

【JavaScript实现Tab切换】 使用类名实现最简单Tab切换 完成函数封装版Tab切换 ...

Javascript—Tab切换

  • 2016年09月01日 10:35
  • 3KB
  • 下载

javascript设计的tab标签切换

  • 2011年03月10日 19:49
  • 2KB
  • 下载

Tab选项卡切换效果JavaScript汇总

tab切换在现在的网页上,真是十分的常用呀。但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现。这里收集了37个tab实现的JavaScript代码,在此备...

JavaScript相册Tab选项卡切换

  • 2012年12月20日 15:35
  • 4.51MB
  • 下载

JavaScript - Tab切换效果

简单Tab切换效果

div css javascript tab 切换页

效果图 css部分 tab.cssbody ,ul{ margin:0; padding:0; list-style:none; font-size:...

[Javascript] Js Tab键切换至指定组件

Tab Key Chanage #formBox ul { width: 600px; } #formBox ul li { margin: 8px; ...

javascript 小练习-tab切换

这是慕课网上的一个小例子         实践题 - 选项卡             *{padding:0px;margin: 0px;font:12px normal "microso...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript实现Tab切换
举报原因:
原因补充:

(最多只允许输入30个字)