javascript之创意选项卡

最新推荐文章于 2023-01-12 16:48:16 发布

云之前端

最新推荐文章于 2023-01-12 16:48:16 发布

阅读量129

点赞数

分类专栏： JavaScript经典案例学习总结文章标签：创意选项卡 js

本文链接：https://blog.csdn.net/qq_44586361/article/details/88703028

版权

学习总结同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

JavaScript经典案例

3 篇文章 0 订阅

订阅专栏

我们都知道选项卡在js的学习过程中是必须要掌握的基本功能，下面我结合了css做了一个创意的选项卡，附上我的代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
#box{width: 500px;height:300px;background: rgb(138,54,15);margin:0 auto;position:relative;}
#box1{text-align:center;}
.content{width:450px;height: 250px;border:2px solid green;display:none;background: white;border-radius:30px;position:absolute;left:10px;}
.content img{width:450px;height:250px;border-radius:30px;}
button{background: green;}
.active{background: yellow;}
</style>
</head>
<body>
<div id="box">
<div id="box1">
<button class="active">one</button>
<button>two</button>
<button>three</button>
<button>four</button>
<div class="content" style="display: block;"><img src="2/1.1.jpg"></div>
<div class="content"><img src="2/2.2.jpg"></div>
<div class="content"><img src="2/3.3.png"></div>
<div class="content"><img src="2/4.4.jpg"></div>
</div>
</div>
<script type="text/javascript">
	var btn=document.getElementsByTagName("button");
	var div=document.getElementsByClassName("content");
	for(var i=0;i<btn.length;i++)
	{
		(function(i){
btn[i].onclick=function()
		{
			for(var j=0;j<btn.length;j++)
			{
				btn[j].className="";
				div[j].style.display="none";
			}
			this.className="active";
			div[i].style.display="block";
		}
	})(i)
	}
</script>
</body>
</html>

效果图如下所示：在这里插入图片描述

云之前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之创意选项卡

我们都知道选项卡在js的学习过程中是必须要掌握的基本功能，下面我结合了css做了一个创意的选项卡，附上我的代码<!DOCTYPE html><html><head> <title></title><style type="text/css">#box{width: 500px;height:300px;backgr...
复制链接

扫一扫