上一篇
下一篇
选项卡-多点调用
作者:cmscn 日期:2007-10-07
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--<link href="1.css" rel="stylesheet" type="text/css">-->
<style>
td {
font-family: "Verdana";
font-size: 9pt;
padding:3px;
}
.tabon {
background-color: #ffffff;
border-top: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;
color: #DB5B6F;
font-weight: bold;
}
.taboff {
background-color: #f5f5f5;
border-top: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;border-bottom: 1px solid #e3e3e3;
color: #666666;
font-weight: bold;
}
.tdbody {
border-bottom: 1px solid #e3e3e3;border-right: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;
line-height:50px;
background-color: #ffffff;
}
.tdbody2 {
border-right: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;
line-height:50px;
background-color: #ffffff;
}
</style>
<script language="JavaScript">
//一个页面n块tab调用show_me(),
//tab_id:事件tab的id,tab_n:事件tab的标签总数，tab_name:事件tab的事件标签“特征名”//
function show_me(tab_id,tab_n,tab_name){
var obj_cont=document.getElementById(tab_id).childNodes[0].childNodes;//from 0 to 6==7(<tr>)
var obj_menu=obj_cont[0].getElementsByTagName("td");//feom 0 to 5==6(<td>)
for (var i=0;i<tab_n;i++){
obj_menu[i].className="taboff";
obj_cont[i+1].style.display="none";
}
document.getElementById("tab_"+tab_name).className="tabon";
document.getElementById("c_"+tab_name).style.display="block";
}
</script>
</head>
<body>
<style>
p {color:#00f;font-weight:bold;font-size:12px;}
</style>
<p>tab01鼠标点击
<table border="0" cellpadding="0" cellspacing="0" width="340" id="tab1">
<tr>
<td class="taboff" id="tab_woman" style="cursor:hand" onClick="show_me('tab1',6,'woman')" align="center">女装</td>
<td class="taboff" id="tab_man" style="cursor:hand" onClick="show_me('tab1',6,'man')" align="center">男装</td>
<td class="taboff" id="tab_sport" style="cursor:hand" onClick="show_me('tab1',6,'sport')" align="center">运动</td>
<td class="taboff" id="tab_leisure" style="cursor:hand" onClick="show_me('tab1',6,'leisure')" align="center">休闲</td>
<td class="taboff" id="tab_shoes" style="cursor:hand" onClick="show_me('tab1',6,'shoes')" align="center">鞋类</td>
<td class="taboff" id="tab_decor" style="cursor:hand" onClick="show_me('tab1',6,'decor')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td>
</tr>
<tr id="c_woman" style="display:none">
<td colspan="6" class="tdbody"><a href="#">女装</a></td>
</tr>
<tr id="c_man" style="display:none">
<td colspan="6" class="tdbody"><a href="#">男装</a></td>
</tr>
<tr id="c_sport" style="display:none">
<td colspan="6" class="tdbody"><a href="#">运动</a></td>
</tr>
<tr id="c_leisure" style="display:none">
<td colspan="6" class="tdbody"><a href="#">休闲</a></td>
</tr>
<tr id="c_shoes" style="display:none">
<td colspan="6" class="tdbody"><a href="#">鞋类</a></td>
</tr>
<tr id="c_decor" style="display:none">
<td colspan="6" class="tdbody"><a href="#">配饰</a></td>
</tr>
</table>
<p>tab02鼠标滑过<br>
<table border="0" cellpadding="0" cellspacing="0" width="340" id="tab2">
<tr>
<td class="taboff" id="tab_woman2" style="cursor:hand" onmouseover="show_me('tab2',6,'woman2')" align="center">女装</td>
<td class="taboff" id="tab_man2" style="cursor:hand" onmouseover="show_me('tab2',6,'man2')" align="center">男装</td>
<td class="taboff" id="tab_sport2" style="cursor:hand" onmouseover="show_me('tab2',6,'sport2')" align="center">运动</td>
<td class="taboff" id="tab_leisure2" style="cursor:hand" onmouseover="show_me('tab2',6,'leisure2')" align="center">休闲</td>
<td class="taboff" id="tab_shoes2" style="cursor:hand" onmouseover="show_me('tab2',6,'shoes2')" align="center">鞋类</td>
<td class="taboff" id="tab_decor2" style="cursor:hand" onmouseover="show_me('tab2',6,'decor2')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td>
</tr>
<tr id="c_woman2" style="display:none">
<td colspan="6" class="tdbody"><a href="#">女装</a></td>
</tr>
<tr id="c_man2" style="display:none">
<td colspan="6" class="tdbody"><a href="#">男装</a></td>
</tr>
<tr id="c_sport2" style="display:none">
<td colspan="6" class="tdbody"><a href="#">运动</a></td>
</tr>
<tr id="c_leisure2" style="display:none">
<td colspan="6" class="tdbody"><a href="#">休闲</a></td>
</tr>
<tr id="c_shoes2" style="display:none">
<td colspan="6" class="tdbody"><a href="#">鞋类</a></td>
</tr>
<tr id="c_decor2" style="display:none">
<td colspan="6" class="tdbody"><a href="#">配饰</a></td>
</tr>
</table>
<p>tab03鼠标点击<br>
<table border="0" cellpadding="0" cellspacing="0" width="340" id="tab3">
<tr>
<td class="taboff" id="tab_woman3" style="cursor:hand" onClick="show_me('tab3',6,'woman3')" align="center">女装</td>
<td class="taboff" id="tab_man3" style="cursor:hand" onClick="show_me('tab3',6,'man3')" align="center">男装</td>
<td class="taboff" id="tab_sport3" style="cursor:hand" onClick="show_me('tab3',6,'sport3')" align="center">运动</td>
<td class="taboff" id="tab_leisure3" style="cursor:hand" onClick="show_me('tab3',6,'leisure3')" align="center">休闲</td>
<td class="taboff" id="tab_shoes3" style="cursor:hand" onClick="show_me('tab3',6,'shoes3')" align="center">鞋类</td>
<td class="taboff" id="tab_decor3" style="cursor:hand" onClick="show_me('tab3',6,'decor3')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td>
</tr>
<tr id="c_woman3" style="display:none">
<td colspan="6" class="tdbody"><a href="#">女装</a></td>
</tr>
<tr id="c_man3" style="display:none">
<td colspan="6" class="tdbody"><a href="#">男装</a></td>
</tr>
<tr id="c_sport3" style="display:none">
<td colspan="6" class="tdbody"><a href="#">运动</a></td>
</tr>
<tr id="c_leisure3" style="display:none">
<td colspan="6" class="tdbody"><a href="#">休闲</a></td>
</tr>
<tr id="c_shoes3" style="display:none">
<td colspan="6" class="tdbody"><a href="#">鞋类</a></td>
</tr>
<tr id="c_decor3" style="display:none">
<td colspan="6" class="tdbody"><a href="#">配饰</a></td>
</tr>
</table>
<p>tab04鼠标点击,初始为第5标签显示<br>
<table border="0" cellpadding="0" cellspacing="0" width="340" id="tab4">
<tr>
<td class="taboff" id="tab_woman4" style="cursor:hand" onClick="show_me('tab4',6,'woman4')" align="center">女装</td>
<td class="taboff" id="tab_man4" style="cursor:hand" onClick="show_me('tab4',6,'man4')" align="center">男装</td>
<td class="taboff" id="tab_sport4" style="cursor:hand" onClick="show_me('tab4',6,'sport4')" align="center">运动</td>
<td class="taboff" id="tab_leisure4" style="cursor:hand" onClick="show_me('tab4',6,'leisure4')" align="center">休闲</td>
<td class="taboff" id="tab_shoes4" style="cursor:hand" onClick="show_me('tab4',6,'shoes4')" align="center">鞋类</td>
<td class="taboff" id="tab_decor4" style="cursor:hand" onClick="show_me('tab4',6,'decor4')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td>
</tr>
<tr id="c_woman4" style="display:none">
<td colspan="6" class="tdbody"><a href="#">女装</a></td>
</tr>
<tr id="c_man4" style="display:none">
<td colspan="6" class="tdbody"><a href="#">男装</a></td>
</tr>
<tr id="c_sport4" style="display:none">
<td colspan="6" class="tdbody"><a href="#">运动</a></td>
</tr>
<tr id="c_leisure4" style="display:none">
<td colspan="6" class="tdbody"><a href="#">休闲</a></td>
</tr>
<tr id="c_shoes4" style="display:none">
<td colspan="6" class="tdbody"><a href="#">鞋类</a></td>
</tr>
<tr id="c_decor4" style="display:none">
<td colspan="6" class="tdbody"><a href="#">配饰</a></td>
</tr>
</table>
<script language="JavaScript">
//网页打开会自动展开：“初始化”调用//不须自动展开的不调用//
window.onload=function(){
show_me('tab1',6,'woman');
show_me('tab2',6,'woman2');
show_me('tab3',6,'woman3');
show_me('tab4',6,'shoes4')
}
</script>
</body>
</html>
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 574
发表评论
