选项卡切换

单个切换

function tab(obj){//obj为jQuery对象
    obj.click(function(event) {//click点击切换，hover悬停切换
        var that=$(this);
        var tabBox=that.parent();
        var Id="."+tabBox.attr("id");
        var on=tabBox.find("li").index(this);
        that.addClass('on').siblings("li").removeClass('on');
        $(Id).eq(on).show().siblings(Id).hide();
    });
}

多个切换

function tab(obj){//obj为jQuery对象
    obj.each(function(){
        var that=$(this);
        that.find("li").click(function(){//click点击切换，hover悬停切换
            var item=$(this);
            var tab=item.parents("ul");
                var con='.'+tab.attr("id");
                var on=tab.find("li").index(this);
                $(this).addClass('on').siblings(tab.find("li")).removeClass('on');
                $(con).eq(on).show().siblings(con).hide();
        });
    });
}

示例

<ul class="m-tab1" id="m-con1">
    <li class="on"><a href="javascript:void(0);">选项卡1</a></li>
    <li><a href="javascript:void(0);">选项卡2</a></li>
    <li><a href="javascript:void(0);">选项卡3</a></li>
    <li><a href="javascript:void(0);">选项卡4</a></li>
</ul>
<div class="m-con1">
    <!--这里是选项卡1的代码-->
</div>
<div class="m-con1 dn">
    <!--这里是选项卡2的代码-->
</div>
<div class="m-con1 dn">
    <!--这里是选项卡3的代码-->
</div>
<div class="m-con1 dn">
    <!--这里是选项卡4的代码-->
</div>

$(function(){
    tab($(".m-tab1"));//$(".m-tab1")为jQuery对象
});
function tab(obj){//obj为jQuery对象
    obj.click(function(event) {//click点击切换，hover悬停切换
        var that=$(this);
        var tabBox=that.parent();
        var Id="."+tabBox.attr("id");
        var on=tabBox.find("li").index(this);
        that.addClass('on').siblings("li").removeClass('on');
        $(Id).eq(on).show().siblings(Id).hide();
    });
}

是不是简单易用？are you get?