管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

js实现tab选项卡函数代码

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

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20setTab(name%2Cm%2Cn)%7B%20%0D%0Afor(%20var%20i%3D1%3Bi%3C%3Dn%3Bi%2B%2B)%7B%20%0D%0Avar%20menu%20%3D%20document.getElementById(name%2Bi)%3B%20%0D%0Avar%20showDiv%20%3D%20document.getElementById(%22cont_%22%2Bname%2B%22_%22%2Bi)%3B%20%0D%0Amenu.className%20%3D%20i%3D%3Dm%20%3F%22on%22%3A%22%22%3B%20%0D%0AshowDiv.style.display%20%3D%20i%3D%3Dm%3F%22block%22%3A%22none%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

<meta name="GENERATOR" content="MSHTML 8.00.7600.16535"> 
</head> 
<body> 
<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> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程