Jquery中文网 > 脚本编程 > javascript > 正文 javascript精美的tab选项卡实现代码

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

发布时间：2017-01-09 编辑：www.jquerycn.cn

jquery中文网为您提供javascript精美的tab选项卡实现代码等资源，欢迎您收藏本站，我们将为您提供最新的javascript精美的tab选项卡实现代码资源

这是一款javascript精美的tab选项卡实现代码，有需要选项卡效果的朋友可以参考本实现哦，很不错的特别推荐一下。

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

<textarea name="runcool" rows="28" cols="75" > <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">配饰</td> </tr> <tr id="cwoman" style="display:none"> <td colspan="6" class="tdbody">女装</td> </tr> <tr id="cman" style="display:none"> <td colspan="6" class="tdbody">男装</td> </tr> <tr id="csport" style="display:none"> <td colspan="6" class="tdbody">运动</td> </tr> <tr id="cleisure" style="display:none"> <td colspan="6" class="tdbody">休闲</td> </tr> <tr id="cshoes" style="display:none"> <td colspan="6" class="tdbody">鞋类</td> </tr> <tr id="cdecor" style="display:none"> <td colspan="6" class="tdbody">配饰</td> </tr> </table></textarea>

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

您可能感兴趣的文章：
js Tab选项卡特效代码
 js自适应滑动门代码
 Javascript中常用选项卡3种写法
 Jquery 经典选项卡的实现代码一例
 jQuery选项卡 KandyTabs
纯CSS实现Tab页切换效果
 纯 CSS 选项卡的实现例子
 jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
 javascript精美的tab选项卡实现代码
 基于jquery的修改当前TAB显示标题的代码

上一篇：javascript 选项卡实现代码下一篇：javascript实现导航标签位于右侧的纵向选项卡

[关闭]

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

最近更新

浏览排行