/** * @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