tab选项卡切换效果

最新推荐文章于 2023-06-12 16:27:57 发布

chenlxhf

最新推荐文章于 2023-06-12 16:27:57 发布

阅读量1.1k

点赞数 1

分类专栏：学习记录文章标签： tab选项卡 js实现tab选项卡

本文链接：https://blog.csdn.net/chenlxhf/article/details/50066781

版权

学习记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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选项卡的效果就实现了。