纯css制作tab选项卡（二）

最新推荐文章于 2021-08-04 08:27:50 发布

置顶 Eva-rascal

最新推荐文章于 2021-08-04 08:27:50 发布

阅读量994

点赞数 2

分类专栏： css 前端开发整理文章标签： css css3

本文链接：https://blog.csdn.net/web_xiaolei/article/details/78214446

版权

css 同时被 2 个专栏收录

7 篇文章 2 订阅

订阅专栏

前端开发整理

7 篇文章 1 订阅

订阅专栏

css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是用纯css制作的tab选项卡效果：

原始界面：

![第一张图片](https://img-blog.csdnimg.cn/img_convert/a2d53b9c6dce3099321cd6e2ebe38837.png)

鼠标点击第二个tab选项，相应内容显示：

![第二张图片](https://img-blog.csdnimg.cn/img_convert/cddd2b21cff2496bfbdce32db0b3f0a6.png)

鼠标划上第三个tab选项：相应内容显示

![第三张图片](https://img-blog.csdnimg.cn/img_convert/3de19594c587c0540662364e4f40f12d.png)

具体内容自己添加啦，下面献上完整代码：

<DOCTYPE html>
<html>
<head>
	<title>Tab选项卡</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			font-size: 0;
		}
		.box{
			text-align: center;
		}
		.box .tab{
			display: inline-block;
			width: 120px;
			height: 44px;
			padding: 7px;
			border: 1px solid #ccc;
			border-bottom: 0px;
			box-sizing:border-box;
			background: #fff;
			font-size: 16px;
			line-height: 26px;
			text-decoration: none;
			color: #555;
			transition: all 0.5s linear;
		}
		.box input[type=radio]{
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		.box input[type=radio]:checked+.tab{
			background-color: #eee;
			transition: all 0.5s linear;
		}
		.box .list{
			width: 800px;
			height: 400px;
			border: 1px solid #ccc;
			padding: 10px;
			position: absolute;/*堆一起*/
			left: 50%;
			margin-left: -400px;
			z-index: 1;
			box-sizing:border-box;
		}
		.list img{
			height: 300px;
			width: auto;
			margin: 40px auto;
		}
		.box #tab1:checked~#list1,
		.box #tab2:checked~#list2,
		.box #tab3:checked~#list3,
		.box #tab4:checked~#list4{
			z-index: 3;
		}
	</style>
</head>
<body>
	<div class="box">
			<input type="radio" id="tab1" name="tab" checked="checked">
			<label class="tab" for="tab1">哇咔咔</label>

			<input type="radio" id="tab2" name="tab">
			<label class="tab" for="tab2">太棒了</label>

			<input type="radio" id="tab3" name="tab">
			<label class="tab" for="tab3">纳尼</label>

			<input type="radio" id="tab4" name="tab">
			<label class="tab" for="tab4">不要听</label>

			<div class="list" id="list1"><img src="img/a.jpg"></div>
			<div class="list" id="list2"><img src="img/c.jpg"></div>
			<div class="list" id="list3"><img src="img/f.jpg"></div>
			<div class="list" id="list4"><img src="img/h.jpg"></div>
	</div>
</body>
</html>

Eva-rascal

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css制作tab选项卡（二）

css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是用纯css制作的tab选项卡效果：原始界面：鼠标点击第二个tab选项，相应内容显示：鼠标划上第三个tab选项：相应内容显示具体内容自己添加啦，下面献上完整代码：<DOCTYPE html><html><head> <title
复制链接

扫一扫

专栏目录