不写任何js实现手风琴和选项卡效果

最新推荐文章于 2020-08-01 17:28:19 发布

pvfhv

最新推荐文章于 2020-08-01 17:28:19 发布

阅读量1.6k

点赞数

分类专栏： div+css 文章标签：手风琴选项卡

本文链接：https://blog.csdn.net/pvfhv/article/details/6181605

版权

div+css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在10年前有一个软件叫qq，它的面板实现了一种推拉效果，后来有人命名为“手风琴”效果并在网页上通过js实现了这个效果，到今天这种效果依然在一些后台管理界面中存在着。还有一种效果，即window系统实现的一种选项卡的效果，不同标签切换显示对应标签下的内容，后来这种效果也广泛地被应用到网页中，那么是不是实现这些效果，必须要写js代码呢，答案是否定的，今天我带大家通过css3的:target伪类选择器实现这两种司空见惯的效果。

手风琴案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:target手风琴效果应用</title>
		<style type="text/css">
			.accordionMenu{
				font: 12px simsun;
				background: #FFFFFF;
				color: #424242;
				margin: 0 auto;
				padding: 10px;
				width: 500px;
			}
			.accordionMenu h2{
				margin: 1px 0;
				padding: 0;
				position: relative;
			}
			.accordionMenu h2 a{
				font-size: 13px;
				text-shadow: 2px 2px 2px #aeaeae;
				text-decoration: none;
				background-color: #8f8f8f;
				background-image: -webkit-linear-gradient(top,#cecece,#8f8f8f);
				border-radius: 5px;
				color: #424242;
				display: block;
				margin: 0;
				padding: 10px;
			}
			.accordionMenu h2:before{
				border: 5px solid #FFFFFF;
				border-color: #FFFFFF transparent transparent;
				width: 0;
				height: 0;
				content: '';
				position: absolute;
				right: 10px;
				top: 15px;
			}
			.accordionMenu :target h2 a,
			.accordionMenu h2 a:hover{
				background-image: -webkit-linear-gradient(top,#6bb2ff,#2288dd);
				color: #FFFFFF;
			}
			.accordionMenu p{
				font-size: 14px;
				margin: 0;
				padding: 0 10px;
				-webkit-transition: all .5s ease-in;
				display: none;
				overflow: hidden;
				background: lightyellow;
				border-radius: 5px;
			}
			.accordionMenu :target p{
				height: 100px;
				display: block!important;
				overflow: auto;
			}
			.accordionMenu :target h2:before{
				-webkit-transform: rotate(-90deg);
				-webkit-transform-origin: 50% 0;
				-webkit-transition: all .2s ease;
			}
		</style>
	</head>
	<body>
		<div class="accordionMenu">
			<div class="menuSection" id="friend">
				<h2><a href="#friend">我的好友</a></h2>
				<p>我的好友：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。</p>
			</div>
			<div class="menuSection" id="stranger">
				<h2><a href="#stranger">陌生人</a></h2>
				<p>陌生人：E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法</p>
			</div>
			<div class="menuSection" id="blacklist">
				<h2><a href="#blacklist">黑名单</a></h2>
				<p>这里是黑名单的内容！！</p>
			</div>
		</div>
	</body>
</html>

效果图：

选项卡案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:target选项卡</title>
		<style type="text/css">
			*{
				font-family: "microsoft yahei";
				margin: 0;
				padding: 0;
			}
			#tabs{
				width: 500px;
				height: 400px;
				margin: 50px auto;
			}
			.tabTitle{
				width: 100%;
				height: 40px;
				line-height: 40px;
				clear: both;
				overflow: hidden;
			}
			.tabTitle > a{
				font-size: 16px;
				text-align: center;
				text-decoration: none;
				color: #000000;
				min-width: 76px;
				height: 100%;
				padding: 0 12px;
				background: #EEEEEE;
				display: block;
				float: left;
				margin-right: 1px;
			}
			.tabTitle > a:hover{
				color: #ffffff;
				background: #00A750;
			}
			.tabContent{
				word-break: break-all;
				color: #FFFFFF;
				width: 100%;
				height: 100px;
				border: 1px solid #EEEEEE;
				overflow: hidden;
			}
			.tabContent > div{
				font-size: 14px;
				width: 100%;
				height: 100%;
				padding: 10px;
				background: #FFFFFF;
				overflow: hidden;
				box-sizing: border-box;
				z-index: 1;
			}
			.tabContent > div:nth-child(1),.tabTitle > a:nth-child(1){
				background: lightsalmon;
			}
			.tabContent > div:nth-child(2),.tabTitle > a:nth-child(2){
				background: lightpink;
			}
			.tabContent > div:nth-child(3),.tabTitle > a:nth-child(3){
				background: goldenrod;
			}
			:target{
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<div id="tabs">
			<div class="tabTitle">
				<a href="#tab1">我的好友</a>
				<a href="#tab2">陌生人</a>
				<a href="#tab3">黑名单</a>
			</div>
			<div class="tabContent">
				<div id="tab1">我的好友：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。</div>
				<div id="tab2">陌生人：E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法</div>
				<div id="tab3">这里是黑名单的内容！！</div>
			</div>
		</div>
	</body>
</html>

效果图：