用javascript写tabPanel
Java代码
<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(
相关新闻>>
- 发表评论
-
- 最新评论 更多>>
