不写js仅用css实现手风琴和选项卡效果

最新推荐文章于 2021-12-20 23:48:01 发布

bingqingsuimeng

最新推荐文章于 2021-12-20 23:48:01 发布

阅读量1.1k

点赞数

分类专栏： linux应用程序之-web前端（html js css）

linux应用程序之-web前端（html js css）专栏收录该内容

73 篇文章 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>