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

JavaScript082

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

<script type="text/javascript">

function getVal()

{

var tab = document.getElementById("tab")

var rows = tab.rows.length

for(var i = 1i <rowsi++)

{

var cols = tab.rows[i].childNodes

for(var m = 0m <cols.lengthm++)

{

alert(cols[m].innerText)

}

}

}

</script>

<table id="tab">

<tr>

<th>学号</th>

<th>姓名</th>

</tr>

<tr>

<td>001</td>

<td>隆美尔</td>

</tr>

<tr>

<td>002</td>

<td>希特勒</td>

</tr>

</table>

<input type="button" value="获取table值" onclick="getVal()"/>