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