用纯CSS3代码实现的tab标签切换

最新推荐文章于 2023-08-28 11:19:47 发布

七里香777

最新推荐文章于 2023-08-28 11:19:47 发布

阅读量628

点赞数

分类专栏：笔记 # CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44286392/article/details/107796275

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

通过点击不同的标签选项来显示相应的内容。
在这里插入图片描述

主要用到CSS的:target选择器
https://www.w3school.com.cn/cssref/selector_target.asp

更详细的可见https://www.cnblogs.com/bgwhite/p/9414282.html
ps:打开后有背景音乐。

z-index属性：https://www.runoob.com/cssref/pr-pos-z-index.html
源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用纯CSS3代码实现的tab标签切换</title>

<style>
	#tab{width:310px;
		 height:200px;
		 border:1px solid;
		 position:absolute;	
		 top:100px;
		 left:100px;
		 }
	ul{list-style:none;padding:0px;margin:0px;}
	ul li{float:left;width:33.3%;}
	ul li a{background:#dbc;/*藕粉色*/
			height:30px;
			line-height:30px;
			display:block;
			text-decoration:none;/*去除下划线*/
			text-align:center;/*文字水平居中*/
			border-right:1px solid #eee;/*右边框，浅浅灰*/
	}
	#tab>div{border-bottom:1px solid;
			 width:100%;
			 height:170px;
			 position:absolute;
			 top:31px;
			 background:#fff;
			 text-indent:2em;/*首行缩进*/
			}
	#div1:target,#div2:target,#div3:target{z-index:1;}/*z-index 属性指定一个元素的堆叠顺序*/
</style>

</head>
<body>
	<div id=tab>
		<ul>
			<li><a href="#div1">标签1</a></li>
			<li><a href="#div2">标签2</a></li>
			<li><a href="#div3">标签3</a></li>
		</ul>
			<div id=div1>这是标签1的内容：白盒测试和黑盒测试的区别</div>
			<div id=div2>这是标签2的内容：白盒测试是通过程序的源代码进行测试而不使用用户界面。这种类型的测试需要从代码句法发现内部代码在算法、溢出、路径、条件等中的缺点或错误，进而加以修正。</div>
			<div id=div3>这是标签3的内容：黑盒测试是通过使用整个软件或某种软件功能来严格进行测试，而并不检查程序的源代码，也不很清楚地了解该软件的源码程序是怎么样设计的。</div>
	</div>
</body>
</html>

七里香777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用纯CSS3代码实现的tab标签切换

通过点击不同的标签选项来显示相应的内容。主要用到CSS的:target选择器https://www.w3school.com.cn/cssref/selector_target.asp更详细的可见https://www.cnblogs.com/bgwhite/p/9414282.htmlps:打开后有背景音乐。z-index属性：https://www.runoob.com/cssref/pr-pos-z-index.html源码：<!DOCTYPE html><ht
复制链接

扫一扫

专栏目录