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>

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

巴特西

tab标签插件 by 腾讯 jianminlu

最新文章

热门文章

巴特西

tab标签 插件 by 腾讯 jianminlu

最新文章

热门文章

tab标签插件 by 腾讯 jianminlu