如何用js代码写一个tab选项卡

JavaScript021

如何用js代码写一个tab选项卡,第1张

代码如下:

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

<script type="text/javascript"> 

function setTab(name,m,n){ 

for( var i=1i<=ni++){ 

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

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

直接复制到本地html页面运行就可以,望采纳,谢谢!

QQ浏览器也是使用的IE内核,因此,任何IE内核浏览器都可以设置启用javascript。浏览器启用javascript的方法:1、首先点击打开浏览器的菜单【工具】,然后选择【选项】-【internet选项】;如果是IE用户,可以直接在IE图标上点击右键,选择属性进入;2、打开Internet选项设置窗口后,点击【安全】选项卡,点击【自定义级别】;3、在弹出的【自定义级别】窗口中,找到【脚本】选项一栏;4、然后点击下面的【Java小程序脚本】和【活动脚本】下的【启用】;5、或者也可以将脚本栏目下的所有项都选择到【启用】;6、设置完成后,点击窗口右下角的【确定】按钮,弹出询问是否更改时,点击【是】;7、最后,在Internet属性窗口中,点击【应用】-【确定】关闭退出即可在浏览器中启用Javascript代码并显示特效了。