tab标签 插件 by 腾讯 jianminlu

/**
 * @version 0.1
 * @author  jianminlu
 * @update  2013-06-19 15:23
 */
(function ($) {
    /**
     * @name    tabs        页卡函数
     * @param   {Object}    初始值
     * @type    {Object}    返回对象本身
     */
    $.fn.tabs = function (options) {
        var config = {
            index: 0,
            current:"current",
            type: "mouseover",
            hdItem: ".tab_hd_item",
            bdItem: ".tab_bd_item"
        },
        obj = $(this),
        opts = $.extend({}, config, options);

        $(opts.hdItem, obj).bind(opts.type, function(){
            if(opts.index != $(opts.hdItem, obj).index($(this))){
                opts.index = $(opts.hdItem, obj).index($(this));
                setCurrent();
            }
        });

        function setCurrent(){
            $(opts.hdItem, obj).removeClass(opts.current).eq(opts.index).addClass(opts.current);
            $(opts.bdItem, obj).css({"display":"none"}).eq(opts.index).css({"display":"block"});
            //$(opts.bdItem, obj).removeClass(opts.current).eq(opts.index).addClass(opts.current);
        }
        setCurrent();
        return obj;
    };
})(jQuery);/*  |xGv00|dfe9081c71f0cee5596e5d50fdf18e87 */

用法：

<div id="tabs1" class="tabs tabs1">
<ul class="tab_hd cf">
<li class="tab_hd_item current">关于腾讯精品课</li>
<li class="tab_hd_item">如何查找课程</li>
<li class="tab_hd_item">订阅课程</li>
<li class="tab_hd_item">创建课程指南</li>
<li class="tab_hd_item">常见问题Q&A</li>
<li class="tab_hd_item">联系我们</li>
</ul>

</div>

<script type="text/javascript" src="http://joke.qq.com/lucky/jquery.tabs.js"></script>
<script type="text/javascript">
// tabs调用
$(function () {
$("#tabs1").tabs({
index: 0,
type: "mouseover",
current: "current",
hdItem: ".tab_hd_item",
bdItem: ".tab_bd_item"
});
});
</script>

http://joke.qq.com/lucky/jquery.tabs.js

tab标签 插件 by 腾讯 jianminlu