javascript制作简单选项卡切换效果

最新推荐文章于 2021-06-16 21:32:21 发布

晨读秀秀

最新推荐文章于 2021-06-16 21:32:21 发布

阅读量251

点赞数

分类专栏： js小实例练习文章标签： javascript js js实现简单选项卡切换效果

本文链接：https://blog.csdn.net/vayulu/article/details/80150630

版权

js小实例练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实例不做过多说明，大体讲讲主要思路吧，首先呢，你想干谁就先把谁找到，也就是开头的哪几组var什么的通过id，tag啥的获取到结点，然后对列表项进行遍历，就是一个简单的for循环，需要注意的一点是列表想的索引问题，

例如title[i].索引名=i;索引名自己设置，至于为什么这么做，我也不知道，不理解又想掌握的最简单的方法就是背过了。

然后给列表项添加事件，先将列表项和内容想的样式清空，然后通过this关键字来控制内容显示。

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>简单选项卡</title>
	</head>
	

	<body>
		<div class="wrap">
			<ul id="title">
				<li class="select">I</li>
				<li>Love</li>
				<li>You</li>
				<li>You</li>
			</ul>
			<ul id="content">
				<li class="show">contain1</li>
				<li>contain2</li>
				<li>contain3</li>
				<li>contain4</li>
			</ul>
		</div>
	</body>
</html>

	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style-type: none;
		}
		.wrap{
			width:500px;
			border: 1px solid red;
			margin: 50px auto;
			overflow: hidden;
		}
		#title{
			width: 100%;
			height: 50px;
		}
		#title li{
			width: 24.85%;
			height: 50px;
			border-bottom: 1px solid red;
			line-height: 50px;
			text-align: center;
			float: left;
		}
		#title li:nth-child(2){
			border-left:1px solid red;
			border-right:1px solid red ;
		}
		#title li:nth-child(3){
			border-right:1px solid red ;
		}
		#content{
			width: 500px;
			overflow: hidden;
		}
		#content li{
			width: 500px;
			height:300px;
			display: none;
			text-align: center;
			line-height: 300px;
			background-color:#F5f5f5;
		}
		#title .select{
			background-color: #FF0000;
			border-bottom: none;
		}
		#content .show{
			display: block;
		}
	</style>

<script>
		window.οnlοad=function(){
		var dt=document.getElementById("title");
		var title=dt.getElementsByTagName("li");
		var dc=document.getElementById("content");
		var list=dc.getElementsByTagName("li");

		//我这里用的是onmouseenter，可以根据需要更换为onclick等

                function tab(){

			for(var i=0;i<title.length;i++){
				title[i].index=i;
				title[i].οnmοuseenter=function(){
					for(var i=0;i<title.length;i++){
						title[i].className="";
						list[i].className="";
					}
					this.className="select";
					list[this.index].className="show";
				}
			}
		};
		tab();
		}
	</script>

晨读秀秀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript制作简单选项卡切换效果

实例不做过多说明，大体讲讲主要思路吧，首先呢，你想干谁就先把谁找到，也就是开头的哪几组var什么的通过id，tag啥的获取到结点，然后对列表项进行遍历，就是一个简单的for循环，需要注意的一点是列表想的索引问题，例如title[i].索引名=i;索引名自己设置，至于为什么这么做，我也不知道，不理解又想掌握的最简单的方法就是背过了。然后给列表项添加事件，先将列表项和内容想的样式清空，然后通过th...
复制链接

扫一扫

专栏目录