背景:
阅读新闻

选项卡效果脚本

[日期:2007-08-22] 来源:  作者: [字体: ]
目前网上用的很多的选项卡效果,点击下边代码查看效果
你可以在iwms结合TopList函数与ImgTopList函数实现多种效果
要实现鼠标感应切换把代码中onclick换为onmouseover

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

收藏 推荐 打印 | 录入:木鸟 | 阅读:
相关新闻      
本文评论   [发表评论]   全部评论
第 3 楼
huam 发表于 2007-11-28 15:20:52
选项卡减少后错处。另外能否修改成div-css
第 2 楼
卢顺成 发表于 2007-10-6 13:40:46
请问:这个样式表是在整个网页中只能使用一次,还是可以重复调用,比如看网易的首页,使用选项卡的地方有很多,那么我们是要为每一个选项卡定义一个样式表,还是只需要定义一个即可!望木鸟回答!很多网友的网站分类很多,想在首页展示更多东西,就需要这个东西!
第 1 楼
rt9 发表于 2007-8-22 18:54:23
最好是鼠标停上面就发生变化!
---
改onClick为onMouseOver