`

仿windows选项卡特效4

    博客分类:
  • js
阅读更多
<!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>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>

 

效果:

 

 

 

来自:http://www.alixixi.com/Dev/HTML/jsrun/color/2008/2008040480024.html

  • 大小: 11 KB
分享到:
评论

相关推荐

    仿windows选项卡特效代码

    仿windows选项卡特效代码! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    仿windows选项卡特效集

    仿windows选项卡特效集! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    仿windows选项卡效果网页特效代码

    仿windows选项卡效果网页特效代码,很实用,而且效果非常好!

    网页常用AJAX特效

    1. **仿Windows选项卡特效** 这种特效模仿了Windows操作系统中的选项卡界面,用户可以通过点击不同的选项卡来切换内容。在AJAX中,可以通过监听用户的点击事件,利用XMLHttpRequest对象向服务器发送请求,获取对应...

    Windows xp 仿win7主题包

    进入控制面板的"显示"设置,选择"主题"选项卡,然后将新安装的主题应用到系统上。 4. 重启或注销系统后,你将看到Windows XP的界面已经转变为类似Win7的风格,包括半透明的任务栏、全新的开始菜单以及改进的窗口控件...

    Windows98主题文件,适用于WIN7,32位、64位及以下系统

    右键点击主题文件,选择"属性",然后在"兼容性"选项卡中,勾选"以兼容模式运行这个程序"。在下拉菜单中选择"Windows 98/ME"。 4. **安装与应用**:按照兼容模式的设置运行主题文件,进行安装。安装过程中,你可能...

    web前端特效库

    例如"jQuery+CSS3仿windows8 Metro风格界面布局效果",这种设计灵感来源于Windows 8操作系统,具有现代感和简洁的交互体验。 "下载条动画特效"则模拟了实际下载过程中的进度条,通过动态效果展示下载进度,让用户对...

    很多JS效果演示集合包

    首先,我们来探讨一下"多种仿Windows选项卡"。选项卡是一种常见的UI设计模式,它允许用户在多个视图之间切换,而不会使页面变得拥挤。仿Windows选项卡的实现通常包括了鼠标悬停、点击切换以及平滑过渡效果。这种效果...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 6.jquery制作自动播放的TAB切换特效 7.基于jQuery简单的Tab滑动门菜单代码(jQuery MoveTab) 8.简单...

    100多个JQuery效果示例(实例)div+css+javascrpit

    64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...

    DIV+CSS网页设计效果2

    "仿winxp"可能是指在网页中模仿Windows XP的界面风格,这涉及到UI设计的复古趋势,同时也展示了如何用CSS来实现特定的视觉效果。 "Test Portal-prototype移动窗口"可能是指模拟窗口拖放和大小调整的功能,这是网页...

    开源 3D 动画建模渲染软件 Blender 2.91.2 x64 中文多语免费版.zip

    执行菜单 Edit – Preferences…,在弹出的 Preferences 界面中,切换到 Interface 选项卡,在该选项卡中勾选 Translation。然后单击 Language 下拉列表,选择 Simplified Chinese(简体中文),同时选中下方的 ...

    手机html界面大全

    "html5手机端tab选项卡切换手指滑动上拉加载.html"可能包含了触摸滑动切换的选项卡设计,使内容浏览更便捷。 6. **视觉一致性**:保持整体风格的一致性,提供良好的视觉感受。"红色的京东手机端用户中心模板html...

    《程序天下:JavaScript实例自学手册》光盘源码

    11.7 网页中的选项卡 11.8 静态导航菜单 11.9 烟花效果的下拉菜单 11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 ...

    程序天下:JavaScript实例自学手册

    11.7 网页中的选项卡 11.8 静态导航菜单 11.9 烟花效果的下拉菜单 11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 ...

Global site tag (gtag.js) - Google Analytics