选项卡组件

关键：用自定义的配置去覆盖默认的配置。

HTML

<div class="wrap" data-config='{
    "triggerType": "click",
    "effect": "default",
    "invoke": "first",
    "auto": false
}'>
    <div class="wrap-list">
        <ul>
            <li class="active">新闻</li>
            <li>体育</li>
            <li>产品</li>
            <li>娱乐</li>
            <li>科技</li>
        </ul>
    </div>
    <div class="wrap-con">
        <div class="active">新闻的内容</div>
        <div>体育的内容</div>
        <div>产品的内容</div>
        <div>娱乐的内容</div>
        <div>科技的内容</div>
    </div>
</div>

JavaScript

首先我们把需要代码包含在一个封闭自执行函数中，防止全局变量污染

;(function($, window, document, undefined) {
    // 所有的代码都写在这里
})(jQuery, window, document);

代码展示