在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> 效果图：
