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

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

发布时间:2017-01-09   编辑:www.jquerycn.cn
jquery中文网为您提供javascript精美的tab选项卡实现代码等资源,欢迎您收藏本站,我们将为您提供最新的javascript精美的tab选项卡实现代码资源
这是一款javascript精美的tab选项卡实现代码,有需要选项卡效果的朋友可以参考本实现哦,很不错的特别推荐一下。
<script>ec(2);</script>
提示:您可以先修改部分代码再运行

<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></td> </tr> </table></textarea>
提示:您可以先修改部分代码再运行

您可能感兴趣的文章:
jQuery选项卡 KandyTabs
实用的Jquery选项卡TAB示例代码
基于jquery的修改当前TAB显示标题的代码
js 选项卡效果的实例代码(图文)
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
JQuery Tab选项卡效果代码改进版
自定义jQuery选项卡插件实例
用jQuery打造TabPanel效果代码
jquery tab插件精简版分享
jquery tools之tabs 选项卡/页签

[关闭]