我正在设计一个 jsp页面。我已经在一个级别创建了选项卡式面板，但我们的项目要求是多级的（选项卡下的子选项卡）。所以我可以使用下面的javascript和html代码来做到这一点。
HTML
<html>
<body>
<div id="panel1" style="background-color:transparent;position:relative;width:1000px;height:350px;left:100px;top:100px;">
<script language="JavaScript" type="text/javascript">
var pacpanel1=new Array('','','','','','','','','','','','');
var piacpanel1=new Array('','','','','','','','','','','','');
</script>
<div id="panel1panel0" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:12;">
your JSP code for panel 1</div>
<div id="panel1tab0" onclick="cjselectTabpanel1(0,pacpanel1,piacpanel1)" title="tab number 1" class="cjdflttbcls" style=" background-color:#d3d3E3;width:90px;height:40px;left:0px;z-index:12;background-image: url('./Images/tabpan.png');background-size:cover;">
payment </div>
<div id="panel1panel1" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:11;">
your JSP code for panel 2</div>
<div id="panel1tab1" onclick="cjselectTabpanel1(1,pacpanel1,piacpanel1)" class="cjdflttbcls" style="width:90px;height:40px;left:91px;z-index:11;background-image: url('./Images/tabpan.png');background-size:cover;">
<label for="interest_inet" id="label-interest1" onClick="func()">tab2</label></div>
<div id="panel1panel2" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:10;">
your JSP code for panel 3</div>
<div id="panel1tab2" onclick="cjselectTabpanel1(2,pacpanel1,piacpanel1)" class="cjdflttbcls" style="width:90px;height:40px;left:182px;z-index:10;background-image: url('./Images/tabpan.png');background-size:cover;">
tab3</div>
<div id="panel1panel3" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:9;">
your JSP code for panel 4</div>
<div id="panel1tab3" onclick="cjselectTabpanel1(3,pacpanel1,piacpanel1)" class="cjdflttbcls" style="width:90px;height:40px;left:270px;z-index:9;background-image: url('./Images/tabpan.png');background-size:cover;">
tab4</div>
<div id="panel1panel4" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:8;">
your JSP code for panel 5</div>
<div id="panel1tab4" onclick="cjselectTabpanel1(4,pacpanel1,piacpanel1)" class="cjdflttbcls" style="width:90px;height:40px;left:360px;z-index:8;background-image: url('./Images/tabpan.png');background-size:cover;">
tab5</div>
<div id="panel1panel5" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:7;">
your JSP code for panel 6</div>
<div id="panel1tab5" onclick="cjselectTabpanel1(5,pacpanel1,piacpanel1)" class="cjdflttbcls" style="float:left;width:90px;height:40px;left:450px;z-index:7;background-image: url('./Images/tabpan.png');background-size:cover;">
tab6</div>
<div id="panel1panel6" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:6;">
your JSP code for panel 7</div>
<div id="panel1tab6" onclick="cjselectTabpanel1(6,pacpanel1,piacpanel1)" class="cjdflttbcls" style="float:left;width:90px;height:40px;left:540px;z-index:6;background-image: url('./Images/tabpan.png');background-size:cover;">
tab7</div>
<div id="panel1panel7" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:5;">
your JSP code for panel 8</div>
<div id="panel1tab7" onclick="cjselectTabpanel1(7,pacpanel1,piacpanel1)" class="cjdflttbcls" style="float:left;width:90px;height:40px;left:630px;z-index:5;background-image: url('./Images/tabpan.png');background-size:cover;">
tab8</div>
<div id="panel1panel8" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:4;">
your JSP code for panel 9</div>
<div id="panel1tab8" onclick="cjselectTabpanel1(8,pacpanel1,piacpanel1)" class="cjdflttbcls" style="float:left;width:90px;height:40px;left:720px;z-index:4;background-image: url('./Images/tabpan.png');background-size:cover;">
tab9</div>
<div id="panel1panel9" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:3;">
your JSP code for panel 10</div>
<div id="panel1tab9" onclick="cjselectTabpanel1(9,pacpanel1,piacpanel1)" class="cjdflttbcls" style="float:left;width:90px;height:40px;left:810px;z-index:3;background-image: url('./Images/tabpan.png');background-size:cover;">
tab10</div>
<div id="panel1panel10" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:2;">
your JSP code for panel 11</div>
<div id="panel1tab10" onclick="cjselectTabpanel1(10,pacpanel1,piacpanel1)" class="cjdflttbcls" style="float:left;width:90px;height:40px;left:900px;z-index:2;background-image: url('./Images/tabpan.png');background-size:cover;">
tab11</div>
<div id="panel1panel11" class="cjdfltpnlclss" style="width:1100px;height:300px;z-index:1;">
your JSP code for panel 12</div>
<div id="panel1tab11" onclick="cjselectTabpanel1(11,pacpanel1,piacpanel1)" class="cjdflttbcls" style="float:left;width:90px;height:40px;left:990px;z-index:1;background-image: url('./Images/tabpan.png');background-size:cover;">
tab12</div>
</div>
</body>
</html>
这是我的javascript代码，用于显示相应的标签面板。
<script language="JavaScript" type="text/javascript">
<!--
function func()
{
function cjselectTabpanel1(n,pac,piac) {
var panelID='panel1';
var numDiv=12;
var panelDiv;
var tabDiv;
for(var i=0; i<numDiv; i++) {
if (document.layers) {
panelDiv=document.layers[panelID+'panel'+i];
tabDiv=document.layers[panelID+'tab'+i]; }
else
if (document.all) {
panelDiv=document.all[panelID+'panel'+i];
tabDiv=document.all[panelID+'tab'+i]; }
else
if (document.getElementById) {
panelDiv=document.getElementById(panelID+'panel'+i);
tabDiv=document.getElementById(panelID+'tab'+i); }
z=panelDiv.style.zIndex;
if (i==n) z=numDiv;
else z=(numDiv-i);
panelDiv.style.zIndex=z;
tabDiv.style.zIndex =z;
if (pac[i]!='' && i==n) tabDiv.style.backgroundImage='url('+pac[i]+')';
if (piac[i]!='' && i!=n) tabDiv.style.backgroundImage='url('+piac[i]+')';
if (i==n) tabDiv.style.backgroundColor='#d3d3E3';
else tabDiv.style.backgroundColor='#e8e8e8';
} }
//-->
</script>
这是用于显示标签及其面板的CSS。
<style type="text/css">
.cjdflttbcls /*this css for tabs*/
{
position:absolute; cursor:pointer; font-weight:bold; text-align:center; border:1px;
border-color:#666633; border-style:outset; background-color:#D3D3e3; border-bottom-style:none;border-bottom-color:#D3D3E3;border-left-style:groove;
margin:0px;
}
.cjdfltpnlclss /*this is for tabs panels*/
{
position:absolute; border:1px; border-color:1px solid #666699; background-color:#d3d3d3; border-style:solid; left:0px;
top:40px; margin:0px; padding:6px;
}
</style>