仿windows选项卡
2009-07-20 09:47
120 查看
<!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">
<!--<link href="1.css" rel="stylesheet" type="text/css">-->
<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>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--<link href="1.css" rel="stylesheet" type="text/css">-->
<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>
相关文章推荐
- js实现仿Windows风格选项卡和按钮效果实例
- 仿Windows风格的选项卡和按钮
- DHTML实例解析:模拟Windows选项卡
- "系统属性选项卡"和"Windows运行命令集"
- [JAVA] java仿windows 字体设置选项卡
- 仿windows选项卡效果拾零(收藏)
- Windows 7系统启用和禁用IE8浏览器选项卡浏览功能的方法
- 仿windows选项卡-1
- JS实现仿Windows经典风格的选项卡Tab切换代码
- [导入]仿windows选项卡效果
- 仿windows选项卡效果拾零
- 仿windows选项卡特效-----------收藏
- Windows 下 gpedit.msc services.msc 扩展选项卡空白
- windows选项卡效果(简化版)
- JS实现仿Windows经典风格的选项卡Tab切换代码
- Javascript : 模拟 Windows 选项卡控制类
- 如何在Windows 8.1的IE11中打开同步选项卡
- 仿windows选项卡特效4
- Windows中右键点击文件夹, 结果找不到共享选项卡, 怎么办?
- "系统属性选项卡"和"Windows运行命令集"