tab+tab

<!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>
View Code