table切换选择

 <div class="tab">
             <div>
                <ul class="tab-hd">
                    <li class="active">统一电价</li>
                    <li>分时计费</li>
                    <li>阶梯计费</li>
                </ul>
                <span class="addBtn" data-toggle="modal">添加</span>
            </div>
            <ul class="tab-bd">
                <li class="thisclass">
                    <!--统一电价-->
                    <div class="main">
                        <table class="table table-bordered table-stripe unifiedTable"></table>
                    </div>
                </li>
                <li>
                    <!--分时计费-->
                    <div class="main">
                        <table class="table table-bordered table-stripe timeDivisionTable"></table>
                    </div>
                </li>
                <li>
                    <!--阶梯计费-->
                    <div class="main">
                        <table class="table table-bordered table-stripe stageTable"></table>
                    </div>
                </li>
            </ul>
        </div>

 

js:

$(function() {
     //切换table内容
     tabs(".tab-hd","active",".tab-bd");
     })

// 声明函数，参数三个：导航标题、当前选择项、当前标题显示内容
function tabs(tabTit,on,tabCon){
    // 找到所有标题并添加单机事件
    $(tabTit).children().click(function(){
        // 声明当前选择项
        var index = $(tabTit).children().index(this);
        // 为当前选中项增加active，移除其兄弟元素的active
        $(this).addClass(on).siblings().removeClass(on);
        // 选中项显示内容，未选中项隐藏内容
        $(tabCon).children().eq(index).show().siblings().hide();
    });
};

 

css:

.tab{
       margin-top: 10px;
   }
.tab-hd {
    overflow:hidden; 
    zoom:1.1;
    width:42%;
    display: inline;
}
.tab-hd>li{ 
    float:left; 
    width: 13%;
    color:#0670E8;
    text-align:center;
    cursor:pointer;
    padding:5px;
    font-size:14px;
    list-style: none;
 }
.tab .addBtn {
     display: inline-block;
    margin-left: 10%;
}