tab选项卡切换效果


       tab选项卡切换效果在大部分的网站上都能看到,这是一个很有用的效果。下面先简单地说下这个效果的实现原理和思路。

       tab选项卡说白了就是n个标签对应n个模块的内容,点到哪个标签,与之相对应的内容就会被显示,其他的内容被隐藏。标签部分一般用一个无序列表,显示的内容部分则用<div class="mode">...</div>这样的包裹层包裹起来。

      实现步骤:

      1.获取标签<li>..</li>数组

       2.获取显示的内容的<div class="mode'>..</div>数组。

      3.将他们一一对应,设置显示的样式。

说起来还是比较麻烦的,直接上源码,这个源码很简单,没有过多的CSS样式,纯粹的是为了演示tab选项卡的效果,不怎么美观。但代码比较简单,一看就懂。下面的源码是可以直接运行的

html部分:

<body>
<!-- 最外层的div是一个包裹整个tab选项卡的包裹层-->
		<div id="wrap">
			<div id="title">
<!-- 标题部分通常用一个无序列表来表示-->				
<ul>
					<li><a href="#">标题一</a></li>
					<li><a href="#">标题二</a></li>
					<li><a href="#">标题三</a></li>
					<li><a href="#">标题四</a></li>
					<li><a href="#">标题五</a></li>
				</ul>
			</div>
			<div id="content">
<!-- 下面的是要显示的内容。一个div对应标题里面的一个标签-->				
<div class="mod">
					<p>我是标签<b>一</b>,我是标签<b>一</b>,我是标签<b>一</b>,我是标签<b>一</b>,我是标签<b>一</b>,</p>
				</div>
				
				<div class="mod" style="display: none;">
					<p>我是标签<b>二</b>,我是标签<b>二</b>,我是标签<b>二</b>,我是标签<b>二</b>,我是标签<b>二</b>,</p>
				</div>
				
				<div class="mod" style="display: none;">
					<p>我是标签<b>三</b>,我是标签<b>三</b>,我是标签<b>三</b>,我是标签<b>三</b>,我是标签<b>三</b>,</p>
				</div>
				
				<div class="mod" style="display: none;">
					<p>我是标签<b>四</b>,我是标签<b>四</b>,我是标签<b>四</b>,我是标签<b>四</b>,我是标签<b>四</b>,</p>
				</div>
				
				<div class="mod" style="display: none;">
					<p>我是标签<b>五</b>,我是标签<b>五</b>,我是标签<b>五</b>,我是标签<b>五</b>,我是标签<b>五</b>,</p>
				</div>
			</div>
		</div>
		
	</body>

CSS部分

<style>
		*{padding: 0;margin: 0;}
		#wrap{
			width: 500px;
			height: 500px;
			margin: 50px auto;
			border:1px solid black;
		}
		#title{
			height: 30px;
			background-color: darkgray;
		}
		#title ul{
			width: 100%;
			list-style: none;
		}
		#title ul li{
			display: inline-block;
			width: 90px;
			float: left;
			padding: 5px;
			text-align: center;
			
		}
		#title ul li a{
			color: white;
			text-decoration: none;
		}
		#title ul li:hover{
			background-color: black;
			color: white;
		}
	</style>

JS部分:

<script>
			window.οnlοad=function(){
				//获取标题列表
				var oparent=document.getElementById("title");
				var lis=oparent.getElementsByTagName("li");
				//获取展示内容的列表
				var mods=document.getElementById("content");
				var divs=mods.getElementsByClassName("mod");
				
				//遍历lis
				for(var i=0;i<lis.length;i++){
					lis[i].id=i;
					//为每个元素添加滑动事件
					lis[i].οnmοuseοver=function(){
						//先清除其他的样式
						for(var j=0;j<lis.length;j++){
							divs[j].style.display="none";
						}
						//被点击的标签所对应的内容显示
						divs[this.id].style.display="block";
					}
				}
			
			}
		</script>

这样,这个tab选项卡的效果就实现了。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值