选项卡切换

单个切换

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();
        });
    });
}

示例

    
选项卡1
    
选项卡2
    
选项卡3
    
选项卡4


    


    


    


    

$(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?