<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>角色选项卡</title> <script src="js/jquery.min.js"></script> <script type="text/javascript"> //外层切换 $(function(){ $('.tabPanel>ul>li').click(function(){ $(this).addClass('hit').siblings().removeClass('hit'); $('.panes>div:eq('+$(this).index()+')').show().siblings().hide(); }) }) //tab切换1 $(function(){ var $tab1_li = $('#tab1 ul li'); $tab1_li.click(function(){ $(this).addClass('selected').siblings().removeClass('selected'); var index = $tab1_li.index(this); $('div.tab1_box > div').eq(index).show().siblings().hide(); }); }); //tab切换2 $(function(){ var $tab2_li = $('#tab2 ul li'); $tab2_li.click(function(){ $(this).addClass('selected').siblings().removeClass('selected'); var index = $tab2_li.index(this); $('div.tab2_box > div').eq(index).show().siblings().hide(); }); }); </script> <style> *{margin:0;padding:0;word-wrap:break-word;word-break:break-all;} ul,li{ list-style:none} /**tab切换**/ /**tabs**/ .tabPanel ul{ width:1035px;height:40px;} .tabPanel ul li{float:left;margin:0 2px 0 0;border:1px solid #e3e7e8; line-height:40px;width:110px;text-align:center;cursor:pointer; text-shadow:0 1px 0 #fff; border-radius:4px 4px 0 0; box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5); } .tabPanel .hit{cursor:pointer; background:#e9edee } .pane{min-height:100px;display:none; margin-top:10px} /* tab1 */ #tab1{position:relative;} #tab1 .tab1_menu{width:100%;float:left;position:absolute;z-index:1;} #tab1 .tab1_menu li{float:left;width:80px;height:30px;line-height:30px;cursor:pointer;text-align:center;margin:0 2px 0 0; border:none} #tab1 .tab1_box{clear:both;top:30px;position:relative;} #tab1 .tab1_menu .selected{ color:#32d47a;cursor:pointer;} .hide{display:none;} .tab1_box div{padding:10px;} /* tab2 */ #tab2{position:relative;} #tab2 .tab2_menu{width:100%;float:left;position:absolute;z-index:1;} #tab2 .tab2_menu li{float:left;width:80px;height:30px;line-height:30px;cursor:pointer;text-align:center;margin:0 2px 0 0;border:none} #tab2 .tab2_box{clear:both;top:30px;position:relative;} #tab2 .tab2_menu .selected{color:#32d47a;cursor:pointer;} .hide{display:none;} .tab2_box div{padding:10px;} </style> </head> <body> <div class="tabPanel"> <ul> <li class="hit">快捷支付</li> <li>网银支付</li> </ul> <div class="panes"> <div class="pane" style="display:block;"> <div id="tab1"> <ul class="tab1_menu"> <li class="selected">1</li> <li>2</li> <li>3</li> </ul> <div class="tab1_box"> <div>11</div> <div class="hide">22</div> <div class="hide">33</div> </div> </div> </div> <div class="pane"> <div id="tab2"> <ul class="tab2_menu"> <li class="selected">时事</li> <li>体育</li> <li>新闻</li> </ul> <div class="tab2_box"> <div>时事的内容</div> <div class="hide">体育的内容</div> <div class="hide">新闻的内容</div> </div> </div> </div> </div> </div> </body> </html>