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

JavaScript019

如何用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页面运行就可以,望采纳,谢谢!

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Tab效果</title>

<style type="text/css">

ul{

list-style: none

}

*{

margin: 0

padding: 0

}

#tab{

border: 1px solid #ccc

margin: 20px auto

width: 403px

border-top: none

}

.list ul{

overflow: hidden

}

.list li{

float: left

}

.list li{

padding-left: 28px

padding-right: 28px

padding-top: 6px

padding-bottom: 6px

border: 1px solid #ccc

background: -moz-linear-gradient(top, #FEFEFE, #EDEDED)

background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed))

border-right: none

cursor: pointer

}

#listCon{

height: 100px

}

#listCon div{

padding:10px

position:absolute

opacity:0

filter:alpha(opacity=0)

}

.list li:first-child{

border-left: none

}

.list li:hover{

background: #fff

border-bottom: none

}

.list li.cur{

background: #fff

border-bottom: none

}

#listCon div.cur{

opacity:1

filter:alpha(opacity=100)

}

</style>

</head>

<body>

<div id="tab">

<div>

<ul>

<li>许嵩</li>

<li>周杰伦</li>

<li>林俊杰</li>

<li>陈奕迅</li>

</ul>

</div>

<div id="listCon">

<div>断桥残雪、千百度、幻听、想象之中</div>

<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>

<div>被风吹过的夏天、江南、一千年以后</div>

<div>十年、K歌之王、浮夸</div>

</div>

</div>

<script type="text/javascript">

window.onload = function(){

var oDiv = document.getElementById("tab")

var lis = oDiv.getElementsByTagName("li")

var oDivCon = document.getElementById("listCon")

var lisDiv = oDivCon.getElementsByTagName("div")

for(var i=0i<lis.lengthi++){

lis[i].index = i

lis[i].onmouseover = function(){

show(this.index)

}

}

function show(a){

for(var j=0j<lis.lengthj++){

lis[j].className = ""

lisDiv[j].className = ""

}

lis[a].className = "cur"

lisDiv[a].className = "cur"

}

}

</script>

</body>

</html>