javascriptでtabPanelを書きます.
4680 ワード
<html>
<head>
<meta content="text/html; charset=UTF-8;"/>
<style type="text/css">
/*------------tab----------*/
.tabItemContainer{
height:30px;
overflow:hidden;
background:#F7F7F7 url(dot.gif) bottom repeat-x;
margin-bottom:6px;
}
.tabItemContainer .tab,
.tabItemContainer .blank{
float:left;
height:24px;
line-height:24px;
margin:0;
margin-right:6px;
margin-top:6px;
overflow:hidden;
cursor:pointer;
}
.tabItemContainer .blank{
width:48px;
}
.tabItemContainer .tab div{
float:left;
height:24px;
}
.tabItemContainer .selected{
}
.tabItemContainer .tab_left,
.tabItemContainer .selected .tab_left{
background:url(tab_on_left.gif) no-repeat bottom right;
width:5px;
}
.tabItemContainer .tab_middle,
.tabItemContainer .selected .tab_middle{
padding:0 16px;
}
.tabItemContainer .selected .tab_middle{
background:url(tab_on_center.gif) repeat-x bottom;s
padding:0 16px;
}
.tabItemContainer .tab_right,
.tabItemContainer .selected .tab_right{
background:url(tab_on_right.gif) no-repeat bottom left;
width:5px;
}
.tabItemContainer .tab_left{
background:url(tab_off_left.gif) no-repeat bottom right;
}
.tabItemContainer .tab_middle{
background:url(tab_off_center.gif) repeat-x bottom right;
}
.tabItemContainer .tab_right{
background:url(tab_off_right.gif) no-repeat bottom left;
}
/*------------tab end----------*/
</style>
<script type="text/javascript">
// tab ，
function changeTab(tabIndex){
var tabIndexVal = parseInt(tabIndex);
//var tabCount=jQuery('#tabCount').val();
for(var i=1;i<=3;i++){
//
if(tabIndexVal==i){
document.getElementById('tab'+i).className="tab selected";
document.getElementById('d'+i).style.display="block";
//jQuery('#tab'+i).removeClass("tab");
//jQuery('#tab'+i).addClass("tab selected");
}else{
document.getElementById('tab'+i).className="tab";
document.getElementById('d'+i).style.display="none";
//jQuery('#tab'+i).removeClass("tab selected");
//jQuery('#tab'+i).addClass("tab");
}
}
//submit2Times(tabKey);
}
</script>
</head>
<body>
<div class="tabItemContainer">
<div id="tab1" class="tab selected">
<div class="tab_left"></div>
<div class="tab_middle">
<a href="javascript:changeTab(1);">
first tab page
</a>
</div>
<div class="tab_right"></div>
</div>
<input id="first" type="hidden" value="asdf"/>
<div id="tab2" class="tab">
<div class="tab_left"></div>
<div class="tab_middle">
<a href="javascript:changeTab(2);">
second tab page
</a>
</div>
<div class="tab_right"></div>
</div>
<input id="secinput" type="hidden" value="asdf"/>
<div id="tab3" class="tab">
<div class="tab_left"></div>
<div class="tab_middle">
<a href="javascript:changeTab(3);">
first tab page
</a>
</div>
<div class="tab_right"></div>
</div>
<input id="third" type="hidden" value="asdf"/>
</div>
<div id="d1" style="float:left;width:100%; height:500px; background-color:#891989">
first
</div>
<div id="d2" style="display:none; float:left;width:100%; height:500px; background-color:#893986">
second
</div>
<div id="d3" style="display:none; float:left;width:100%; height:500px; background-color:#896983">
thrid
</div>
</body>
</html>