在做项目时，有时候会因为某些需求而需要用到切换卡，我们平常会到网上去找，虽然网上有很多，也很不错，但是在项目管理时还说比较繁琐的，比如引入样式和js代码，有些是我们不需要的，还得去整理，比较麻烦。下面给大家分享下我自己做的切换卡。

html代码部分：
菜单1
带单2
内容1
内容2

样式代码:
.tabs {
    width: 100%;
    height: auto;
}
.tabs .nav-tabs {
    border-bottom: 1px solid #ddd;
    height: 42px;
}
.tabs .nav-tabs li {
    border-radius: 3px;
    padding: 12px;
    height: 42px;
    color: #333;
    text-align: center;
    float: left;
    cursor: pointer;
}
.tabs .nav-tabs li.active {
    border: 1px solid #ddd;
    border-bottom: 1px solid #FAFAFA;
}
.tabs .nav-tabs li:hover {
	background: #eee;
}
.tabs .tab-content {
    padding: 15px 0;
    width: 100%;
    height: auto;
}
.tabs .tab-content .tabsbox {
    width: 100%;
    height: auto;
    display: none;
}

js代码部分
$.fn.tabs = function(params) {
    var $this = $(this);
    $(this).find('.nav-tabs li, .tabs-btn span').on('click',function(){
        $(this).addClass('active').siblings().removeClass('active');
        $(this).parents('.nav-tabs').next('.tab-content').find('.tabsbox:nth-child('+($(this).index()+1)+')').fadeIn().siblings().hide();
        params.callback({
            index: $(this).index()+1,
            el: $(this)
        });
    })
}

调用部分
$('#tabs').tabs({
    callback: function(p){

    } 
});