原生js选项卡

最新推荐文章于 2022-10-13 13:11:16 发布

余校长

最新推荐文章于 2022-10-13 13:11:16 发布

阅读量217

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_45531704/article/details/102509937

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原生js选项卡

思路：选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。

步骤：

       1、首先获取元素。

	   2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

	   3、因为点击当前按钮时会以高亮状态显示，所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。

       4、把当前按钮添加样式，把当前DIV显示出来，display设置为block。

废话不说直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		//css 样式
		<style type="text/css">
			.main .content{
				width: 200px;
				height: 200px;
				border: 1px solid #333;
				font-size: 100px;
				line-height: 200px;
				text-align: center;
				display: none;
				border-radius: 100px;
				color:#333333;
			}
			.main>.content:first-child{
				background: #00FFFF;
			}
			.main>.content:nth-child(2){
				background: greenyellow;
			}
			.main>.content:last-child{
				background:fuchsia;
			}
			.active{
				background: red;
			}
			.aaa{
				color: #fff;
			}
		</style>
	</head>
	<body>
	//点击按钮
		<div class="head">
			<button class="aaa active">1</button>
			<button class="aaa">2</button>
			<button class="aaa">3</button>
		</div>
		//对应的div
		<div class="main">
			<div class="content" style="display: block;">1</div>
			<div class="content">2</div>
			<div class="content">3</div>
		</div>
		<script>
		     //获取元素
			var btns=document.querySelectorAll(".head button");
			var contents=document.querySelectorAll(".main .content");
			//for 循环遍历
			for(var i=0;i<btns.length;i++){
				  btns[i].index=i; //自定义下标
				  btns[i].onclick=function(){ //点击按钮触发事件
				  	for(var i=0;i<btns.length;i++){
				  	//让其他div隐藏，其他按钮的类名消失
				  		contents[i].style.display="none";
				  		btns[i].className="";
				  	}
				  	//让对应的div显示
				  	contents[this.index].style.display="block"; //this指向事件源
				  	this.className="active";
				  }
			}
		</script>
	</body>
</html>

余校长

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
原生js选项卡

原生js选项卡思路：选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。步骤： 1、首先获取元素。 2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。 3、因为点击当前按钮时会以高亮状态显示，所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display...
复制链接

扫一扫