jQuery之美——选项卡

选项卡是非常常见而实用的效果，本篇文章示例一个简单的选项卡效果，在以往的代码中都是选择jQuery对象级别插件扩展，本次将改为类级别插件扩展的方式。

上效果图：

源码如下：

<!--
    author:helang
    Email:[email protected]
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="[email protected]">
    <title>jQuery之美——选项卡</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            font-size: 14px;
            font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
            letter-spacing: 0;
            color: #333333;
        }
        .container{
            width: 600px;
            height: auto;
            margin: 0 auto;
        }

        /* 选项卡样式开始 */
        .tabControl ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .tabControl ul.head:after{
            content: '';
            display: block;
            clear: both;
        }
        .tabControl ul.head>li{
            padding: 0 25px;
            float: left;
            border-top: #cccccc solid 1px;
            border-right: #cccccc solid 1px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            position: relative;
            cursor: pointer;
        }
        .tabControl ul.head>li:first-child{
            border-left: #cccccc solid 1px;
        }
        .tabControl ul.head>li.active{
            color: #EA0D04;
        }
        .tabControl ul.head>li.active:after{
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background-color: #ffffff;
            position: absolute;
            left: 0;
            bottom: -1px;
            z-index: 1;
        }
        .tabControl ul.body{
            border: #cccccc solid 1px;
            height: 150px;
        }
        .tabControl ul.body>li{
            padding: 15px;
            margin: 0;
            display: none;
        }
        /* 选项卡样式结束 */
    </style>
</head>
<body>
<h1 style="text-align: center;margin: 20px 0;">jQuery之美——选项卡</h1>
<div class="container">
    <!-- 选项卡开始 -->
    <div class="tabControl">
        <ul class="head" id="tabHead-1">
            <li>我的邮箱</li>
            <li>我的QQ</li>
            <li>微信公众号</li>
        </ul>
        <ul class="body" id="tabBody-1">
            <li>
                <h2>[email protected]</h2>
            </li>
            <li>
                <h2>1846492969</h2>
            </li>
            <li>
                <h2>WEB前端梦之蓝：web-7258</h2>
            </li>
        </ul>
    </div>
    <!-- 选项卡结束 -->
</div>
<script type="text/javascript" src="../access/jquery.1.9.1.min.js"></script>
<script type="text/javascript">
    /* jQuery类级别插件扩展 */
    $.extend({
        hlTabControl:function (params) {
            if(!$.isPlainObject(params)){
                console.error("参数必须为一个 Object 对象，并包含 head,body 属性");
            }
            var headEl=params.head.children("li"),bodyEl=params.body.children("li");
            var changeTab=function (item) {
                headEl.eq(item).addClass("active").siblings("li").removeClass("active");
                bodyEl.eq(item).show().siblings("li").hide();
            };
            headEl.click(function () {
                changeTab($(this).index());
            });
            changeTab(params.item || 0);
        }
    });

    $.hlTabControl({
        head:$("#tabHead-1"),   // 头部元素容器
        body:$("#tabBody-1"),   // 内容元素容器
        item:2  // 默认显示项(下标)
    });
</script>
</body>
</html>

下篇预告：jQuery之美——手风琴

更多精彩文章，敬请持续关注——WEB前端梦之蓝

用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦！

jQuery之美——选项卡

猜你喜欢