一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

首页游戏下载软件下载专题资讯教程 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

+ -

当前位置：一聚教程网 > 网页特效 > 页面特效

推荐专题

最新下载

1

垃圾清洁工垃圾车
0M 类型： 模拟经营
2

蚂蚁猎人下载安装
80.15MB 类型： 休闲益智
3

炎黄大陆正式版
169.52MB 类型： 角色扮演
4

世界摩托大奖赛游戏最新版
85.26MB 类型： 赛车竞速
5

漫威超级英雄模拟器安装
30.74MB 类型： 动作冒险
6

亡灵村
41.68MB 类型： 动作冒险
7

拆散情侣我最强中文版最新下载
520MB 类型： 动作冒险
8

layesta安装
129MB 类型： 休闲益智
9

画线快跑游戏安装
72.16MB 类型： 休闲益智
10

飞跃虹镜版
3319.48MB 类型： 角色扮演

热门教程

1

诡楼回魂第一章攻略详解
时间：2024-04-25 类型： 游戏攻略
2

原神阿蕾奇诺突破材料大全最新一览
时间：2024-04-25 类型： 游戏攻略
3

万国觉醒拜巴尔怎么养
时间：2024-04-24 类型： 游戏攻略
4

斗罗大陆魂师对决怎么把星数重置
时间：2024-04-24 类型： 游戏攻略
5

光遇办公室怎么进
时间：2024-04-24 类型： 游戏攻略
6

乱斗西游2如何免费获得伏羲
时间：2024-04-24 类型： 游戏攻略
7

剑与远征格温妮丝赏金试炼攻略大全
时间：2024-04-24 类型： 游戏攻略
8

时空猎人装备融合满了怎么开启特效
时间：2024-04-23 类型： 游戏攻略
9

率土之滨兵种加成怎么提高
时间：2024-04-23 类型： 游戏攻略
10

古墓丽影9技能点怎么获得
时间：2024-04-23 类型： 游戏攻略

javascript精美的tab选项卡实现代码

时间：2022-06-25 20:43:14 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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-
	background-color: #ffffff;
}
.tdbody2 {
	border-right: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;
	line-
	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></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

相关文章

热门栏目