JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > CSS3+jQuery实现文件夹选项卡

CSS3+jQuery实现文件夹选项卡


源码下载   在线演示
        使用CSS3实现文件夹效果,结合jquery实现选项卡切换效果。

HTML <ul id="tabs">    <li><a href="#" name="tab1">One</a></li>    <li><a href="#" name="tab2">Two</a></li>    <li><a href="#" name="tab3">Three</a></li>    <li><a href="#" name="tab4">Four</a></li></ul> <div id="content">    <div id="tab1">...</div>    <div id="tab2">...</div>    <div id="tab3">...</div>    <div id="tab4">...</div></div> CSS #tabs{  overflow: hidden;  width: 100%;  margin: 0;  padding: 0;  list-style: none;} #tabs li{  float: left;  margin: 0 .5em 0 0;} #tabs a{  position: relative;  background: #ddd;  background-image: linear-gradient(to bottom, #fff, #ddd);  padding: .7em 3.5em;  float: left;  text-decoration: none;  color: #444;  text-shadow: 0 1px 0 rgba(255,255,255,.8);  border-radius: 5px 0 0 0;  box-shadow: 0 2px 2px rgba(0,0,0,.4);} #tabs a:hover,#tabs a:hover::after,#tabs a:focus,#tabs a:focus::after{  background: #fff;} #tabs a:focus{  outline: 0;} #tabs a::after{  content:'';  position:absolute;  z-index: 1;  top: 0;  right: -.5em;  bottom: 0;  width: 1em;  background: #ddd;  background-image: linear-gradient(to bottom, #fff, #ddd);  box-shadow: 2px 2px 2px rgba(0,0,0,.4);  transform: skew(10deg);  border-radius: 0 5px 0 0;} #tabs #current a,#tabs #current a::after{  background: #fff;  z-index: 3;} #content{    background: #fff;    padding: 2em;    height: 220px;    position: relative;    z-index: 2;    border-radius: 0 5px 5px 5px;    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);} jQuery <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script>$(document).ready(function() {    $("#content div").hide(); // Initially hide all content    $("#tabs li:first").attr("id","current"); // Activate first tab    $("#content div:first").fadeIn(); // Show first tab content     $('#tabs a').click(function(e) {        e.preventDefault();        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab         return        }        else{        $("#content div").hide(); //Hide all content        $("#tabs li").attr("id",""); //Reset id's        $(this).parent().attr("id","current"); // Activate this        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab        }    });});</script>

【CSS3+jQuery实现文件夹选项卡】相关文章

1. CSS3+jQuery实现文件夹选项卡

2. CSS3+jQuery实现文件夹选项卡

3. jQuery文件夹管理插件 可删除文件夹

4. 带选项卡功能的在线客服Jquery特效

5. jQuery右侧Tab选项卡的焦点图插件

6. CSS3切角选项卡tabs

7. 一款基于css3和jquery实现的动画弹出层

8. jQuery读取json文件,实现省市区/县(国标)三级联动

9. HTML5+jQuery实现支持桌面和移动拖动iPhone风格插件

10. jQuery实现响应HTML5表单

本文来源:https://www.51html5.com/a1213.html

点击展开全部

﹝CSS3+jQuery实现文件夹选项卡﹞相关内容

「CSS3+jQuery实现文件夹选项卡」相关专题

其它栏目

也许您还喜欢