您的位置：首页 > 其它

仿Windows选项卡

2009-12-14 17:14 399 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">



<script language="JavaScript">

function tabit(id,cid) {

tabwoman.className="taboff";tabman.className="taboff";tabsport.className="taboff";tableisure.className="taboff";tabshoes.className="taboff";tabdecor.className="taboff";id.className="tabon";

cwoman.style.display="none";cman.style.display="none";csport.style.display="none";cleisure.style.display="none";cshoes.style.display="none";cdecor.style.display="none";cid.style.display="block";

//winname=cid;

}

function showall() {

tabwoman.className="tabon";tabman.className="tabon";tabsport.className="tabon";tableisure.className="tabon";tabshoes.className="tabon";tabdecor.className="tabon";

cwoman.style.display="block";cman.style.display="block";csport.style.display="block";cleisure.style.display="block";cshoes.style.display="block";cdecor.style.display="block";

}

</script>

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

</head>

<body onLoad="tabit(tabwoman,cwoman)">

<table border="0" cellpadding="0" cellspacing="0" width="340">

<tr>

<td class="taboff" id="tabwoman" style="cursor:hand" onClick="tabit(tabwoman,cwoman)" align="center">女装</td>

<td class="taboff" id="tabman" style="cursor:hand" onClick="tabit(tabman,cman)" align="center">男装</td>

<td class="taboff" id="tabsport" style="cursor:hand" onClick="tabit(tabsport,csport)" align="center">运动</td>

<td class="taboff" id="tableisure" style="cursor:hand" onClick="tabit(tableisure,cleisure)" align="center">休闲</td>

<td class="taboff" id="tabshoes" style="cursor:hand" onClick="tabit(tabshoes,cshoes)" align="center">鞋类</td>

<td class="taboff" id="tabdecor" style="cursor:hand" onClick="tabit(tabdecor,cdecor)" align="center" style="border-right: 1px solid #E3E3E3">配饰</td>

</tr>

<tr id="cwoman" style="display:none">

<td colspan="6" class="tdbody"><a href="#">女装</a></td>

</tr>

<tr id="cman" style="display:none">

<td colspan="6" class="tdbody"><a href="#">男装</a></td>

</tr>

<tr id="csport" style="display:none">

<td colspan="6" class="tdbody"><a href="#">运动</a></td>

</tr>

<tr id="cleisure" style="display:none">

<td colspan="6" class="tdbody"><a href="#">休闲</a></td>

</tr>

<tr id="cshoes" style="display:none">

<td colspan="6" class="tdbody"><a href="#">鞋类</a></td>

</tr>

<tr id="cdecor" style="display:none">

<td colspan="6" class="tdbody"><a href="#">配饰</a></td>

</tr>

</table>

<a href="http://js.alixixi.com/
">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航