html 3重嵌套选项卡,【案例分享】多个选项卡的嵌套原理

body{font-size:12px;padding:0;margin:0;}

ul,li,dl,dd{list-style:none;padding:0;margin:0;}

.clr:after{content:".";display:block;height:0;clear:both;overflow:hidden;}

.clr{*zoom:1}

.rgTab{width:90%;margin:50px auto;}

.btnTabs{width: 90%;margin-left:1px;}

.btnTabs b,.btnTabs li,.btnTabs a{

float:left;width:33%;height:30px;display:inline-block;

line-height:30px;text-align:center;font-size:16px;font-weight:bold;

background:#eee;border:1px solid #dedede;margin-left:-1px;cursor:pointer;

border-top-left-radius:5px;border-top-right-radius:5px;

}

.btnTabs b.on,.btnTabs li.on,.btnTabs a.on{border-bottom:1px solid #fff;background:#fff;}

.showBox1,.showBox2,.showBox3{width:90%;display:none;border:1px solid #dedede;margin-top:-1px;padding:22px 20px 56px 20px;}

function tab(tabID,box){

$(tabID).click(function(){

$(tabID).removeClass('on');

$(box).hide();

$(this).addClass('on');

$(box).eq($(this).index()).show();

});

}

$(document).ready(function(){

//选项卡

tab("#tab1 b",'.showBox1');

tab("#tab2 li",'.showBox2');

tab("#tab3 a",'.showBox3');

});

111111

222222

333333

第一层

• aaa
• bbb
• ccc

第二层

aaa

bbb

ccc

第三层

aaaaaaaaaa

第三层

bbbbbbb

第三层

cccccccc

第二层

bbbb

第二层

cccc

第一层

222222

第一层

333333