用javascript写tabPanel

最新推荐文章于 2023-05-23 22:35:14 发布

乐邦666

最新推荐文章于 2023-05-23 22:35:14 发布

阅读量195

点赞数

分类专栏： JavaScript 文章标签： javascript html web ViewUI

本文链接：https://blog.csdn.net/zyy_jay/article/details/84057184

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


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

乐邦666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用javascript写tabPanel

[code="java"] /*------------tab----------*/ .tabItemContainer{ height:30px; overflow:hidden; background:#F7F7F7 url(dot.gif) bottom repeat-x; margin-bottom:6px; } .tabItem...
复制链接

扫一扫

专栏目录