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实现Tab切换】

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

Javascript实现Tab切换

用javascript实现在Tab标签之间切换,通过点击Tab标签,显示出对应的内容。 ul {overflow:hidden; zoom:1; list-style-type:non...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

javascript tab切换

http://www.w3.org/1999/xhtml"> javascript+css tab 切换菜单效果 http://c1.neweggimages.com.cn/WebReso...

javascript实现的tab选项卡切换

Tab选项卡 *{ padding: 0px; margin: 0px; font-family: microsoft yahei; font-size: 14px; ...

纯CSS实现Tab切换 以及 CSS+JS实现Tab切换

纯CSS实现Tab切换 效果图 思路 代码 CSSJS实现Tab切换 效果图 思路纯CSS实现Tab切换效果图思路ul li显示tab列表 li里面嵌套子div 显示详情 子div采用绝对布局 (让...

关于tab切换一些方法总结

方案一: 1.CSS body{ margin:0; padding:0;} ul,li{ margin:0; padding:0; list-style:none;} .tab-box{ widt...

JS实现tab切换

图片切换 *{ margin:0; padding: 0; } ul{ ...
  • yl107
  • yl107
  • 2017-04-28 17:08
  • 135

Android:TabHost实现Tab切换

TabHost是整个Tab的容器,包含TabWidget和FrameLayout两个部分,TabWidget是每个Tab的表情,FrameLayout是Tab内容。 实现方式有两种: 1、...

Android-TabHost实现Tab切换

http://www.cnblogs.com/tinyphp/p/3875105.html TabHost是整个Tab的容器,包含TabWidget和FrameLayout两个部分,...

JQUERY实现TAB切换

博主是一枚前端小菜鸟,因为挺长时间没接触页面布局了,居然连tab栏切换都给忘了,后来博主看了一些前端资料还有书,发现网上的很多方法都杂乱无章,看的云里雾里的,冗余代码太多,这让新手小白会很苦恼,所以博...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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