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>

代码测试截图:


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

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

Tab Key Chanage #formBox ul { width: 600px; } #formBox ul li { margin: 8px; ...
  • qq_14852397
  • qq_14852397
  • 2016年10月21日 01:46
  • 1560

使用js实现tab页签切换效果

效果图如下:
  • Geek_ymv
  • Geek_ymv
  • 2014年10月23日 11:20
  • 43574

js实现tab切换以及自动切换

js实现tab切换以及自动切换
  • mr_fzz
  • mr_fzz
  • 2016年11月23日 14:20
  • 1975

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

一个可以js(JavaScript)的tab标签切换代码,可以自动适应宽度,可以自己添加删除标签块,傻瓜式操作便能完成! ...
  • Iamduoluo
  • Iamduoluo
  • 2011年07月27日 09:54
  • 12127

JavaScript原生实现Tab选项卡各种切换效果

提起tab选项卡,估计做web开发的小伙伴们都不陌生,这个功能也是一个常用功能,今天就带大家一起来实现它。 效果图 一、Tab切换类型 滑过切换 点击切换 延迟切换 ...
  • zwjweb
  • zwjweb
  • 2017年12月29日 13:21
  • 76

javascript实现tab切换效果

这个功能是很久之前实现的,现在发上来,很长一段时间没更新博客了,真惭愧。这个JS代码还有很多修改的空间,先发上来,以后再发个更新的版本吧。 这是效果图: 【HTML代码】 ...
  • woshinidedege
  • woshinidedege
  • 2017年12月15日 23:21
  • 26

【JavaScript实现Tab切换】

【JavaScript实现Tab切换】 使用类名实现最简单Tab切换 完成函数封装版Tab切换 ...
  • M_agician
  • M_agician
  • 2017年08月03日 00:33
  • 986

javascript实现tab切换效果

这个功能是很久之前实现的,现在发上来,很长一段时间没更新博客了,真惭愧。这个JS代码还有很多修改的空间,先发上来,以后再发个更新的版本吧。 这是效果图: 【HTML代码】 ...
  • my98800
  • my98800
  • 2017年11月27日 10:21
  • 206

Javascript—Tab切换

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

JavaScript相册Tab选项卡切换

  • 2012年12月20日 15:35
  • 4.51MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript实现Tab切换
举报原因:
原因补充:

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