js实现tab选项卡函数代码

现在的位置: 首页 > 综合 > 正文

js实现tab选项卡函数代码

2012年09月09日 ⁄ 综合 ⁄ 共 877字 ⁄ 字号小中大 ⁄ 评论关闭

<br />
<style type="text/css"> 
* 
{ 
padding-bottom: 0px; 
margin: 0px; 
padding-left: 0px; 
padding-right: 0px; 
font-size: 12px; 
padding-top: 0px; 
} 
BODY 
{ 
padding-left: 20px; 
padding-top: 20px; 
} 
.wid240 
{ 
width: 242px; 
margin-bottom: 20px; 
} 
.wid180 
{ 
width: 182px; 
} 
.tab 
{ 
border-bottom: #000 1px solid; 
border-left: #000 1px solid; 
border-top: #000 1px solid; 
border-right: #000 1px solid; 
} 
.tab UL 
{ 
zoom: 1; 
clear: both; 
} 
.tab UL:after 
{ 
display: block; 
height: 0px; 
visibility: hidden; 
clear: both; 
content: ""; 
} 
.tab UL LI 
{ 
text-align: center; 
line-height: 26px; 
width: 60px; 
display: inline; 
background: #000; 
float: left; 
height: 26px; 
color: #fff; 
} 
.tab UL LI.on 
{ 
background: #fff; 
color: #000; 
} 
.tabList 
{ 
border-bottom: #000 1px solid; 
border-left: #000 1px solid; 
height: 150px; 
border-top: #000 1px; 
border-right: #000 1px solid; 
} 
.tabList .one 
{ 
padding-bottom: 10px; 
padding-left: 10px; 
padding-right: 10px; 
display: none; 
color: #ff0000; 
padding-top: 10px; 
} 
.tabList .block 
{ 
display: block; 
} 
</style>
<p><script type="text/javascript"> 
function setTab(name,m,n){ 
for( var i=1;i<=n;i++){ 
var menu = document.getElementById(name+i); 
var showDiv = document.getElementById("cont_"+name+"_"+i); 
menu.className = i==m ?"on":""; 
showDiv.style.display = i==m?"block":"none"; 
} 
} 
</script><meta name="GENERATOR" content="MSHTML 8.00.7600.16535">
<div class="wid240">
<div class="tab">
<ul>
<li id="one1" class="on" onmouseover='setTab("one",1,4)'>one1 </li>
<li id="one2" onmouseover='setTab("one",2,4)'>one2 </li>
<li id="one3" onmouseover='setTab("one",3,4)'>one3 </li>
<li id="one4" onmouseover='setTab("one",4,4)'>one4 </li>
</ul>
</div>
<div class="tabList">
<div id="cont_one_1" class="one block">
cont_one_1</div>
<div id="cont_one_2" class="one">
cont_one_2</div>
<div id="cont_one_3" class="one">
cont_one_3</div>
<div id="cont_one_4" class="one">
cont_one_4</div>
</div>
</div>
<div class="wid180">
<div class="tab">
<ul>
<li id="tow1" class="on" onclick='setTab("tow",1,3)'>tow1 </li>
<li id="tow2" onclick='setTab("tow",2,3)'>tow2 </li>
<li id="tow3" onclick='setTab("tow",3,3)'>tow3 </li>
</ul>
</div>
<div class="tabList">
<div id="cont_tow_1" class="one block">
cont_tow_1</div>
<div id="cont_tow_2" class="one">
cont_tow_2</div>
<div id="cont_tow_3" class="one">
cont_tow_3</div>
</div>
</div>
<p>

【上篇】dll_part
【下篇】多文件上传控件(附示例下载)

作者: headgear

该日志由 headgear 于12年前发表在综合分类下，最后更新于 2012年09月09日.
转载请注明: js实现tab选项卡函数代码 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

js实现tab选项卡函数代码

作者: headgear

书签

最新文章New

本站推荐

返回首页