简洁的jQuery选项卡(Tab页签)插件

代码2015-03-234,073 人已阅来源：网络

一个很简洁的jQuery选项卡插件，只要你不是前端傻子，看一会儿就能明白怎么使用的。

这个效果很赞的，可以作鼠标经过切换，也可以作鼠标点击切换。关键是可以无限重复使用，稍作修改，也可以作嵌套Tab页签效果。属于必须收藏的那种效果！

不再啰嗦，下面可能是你不常看到如此简洁干净的demo了。

简洁的jQuery选项卡(Tab页签)插件 Demo

运行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简洁jQuery选项卡插件 - www.tonjay.com</title>
    <meta name="keywords" content="简洁jQuery选项卡插件 www.tonjay.com" />
    <meta name="description" content="简洁jQuery选项卡插件 www.tonjay.com" />
</head>
<style>
* {font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;margin:0;padding:0;}
ul,li {list-style:none;}
body {max-width:640px;margin:50px auto;}
ul {display:table;text-align:center;width:100%;background:linear-gradient(#f5f5f5,#eee);border-radius:3px;line-height:40px;overflow:hidden;}
li {display:table-cell;cursor:pointer;}
li:not(:last-child) {border-right:1px solid rgba(0,0,0,0.05);}
li:hover {background:linear-gradient(#eee,#e5e5e5);}
li.active {background:linear-gradient(#444,#333);color:#fff;}
.content-1,.content-2 {padding:40px;border:1px solid #eee;margin-top:10px;border-radius:3px;}
.tab-2 {margin-top:50px;}
</style>
<body>
    <ul class="tab-1">
        <li>TONJAY.COM</li>
        <li>TONJAY.COM</li>
        <li>TONJAY.COM</li>
    </ul>
    <div class="content-1">
        <div class="content-item">
            <p>This the one!鼠标点击切换</p>
            <p>From <a href="https://aihongxin.com">www.tonjay.com  web前端资源网</a></p>
        </div>
        <div class="content-item">
            <p>鼠标点击切换 This the two</p>
            <p>Frome <a href="https://aihongxin.com">web前端资源网  www.tonjay.com</a></p>
        </div>
        <div class="content-item">
            <p>This the three!鼠标点击切换</p>
            <p>From <a href="https://aihongxin.com">www.tonjay.com  web前端资源网</a></p>
        </div>
    </div>
    <ul class="tab-2">
        <li>TONJAY.COM</li>
        <li>TONJAY.COM</li>
    </ul>
    <div class="content-2">
        <div class="content-item">
            <p>This the one 鼠标经过切换</p>
            <p>From <a href="https://aihongxin.com">www.tonjay.com  web前端资源网</a></p>
        </div>
        <div class="content-item">
            <p>鼠标经过切换 This the two</p>
            <p>Frome <a href="https://aihongxin.com">web前端资源网  www.tonjay.com</a></p>
        </div>
    </div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function() {
            function Tab(tab,content,events){
                $(tab).find("li:first").addClass("active");
                $(content).find(".content-item").not(":first").hide();
                $(tab).on(events,"li",function(){
                    $(this).addClass("active").siblings().removeClass("active");
                    var itemIndex = $(this).index();
                    $(content).find(".content-item").eq(itemIndex).show().siblings().hide();
                })
            }
            Tab(".tab-1",".content-1","click");
            Tab(".tab-2",".content-2","mouseenter");
        })
    </script>
</body>
</html>

AIHX

简洁的jQuery选项卡(Tab页签)插件

简洁的jQuery选项卡(Tab页签)插件 Demo

相关内容