基于表格的 Tab

2024-09-05 12:20:16

字体：大中小

来源：转载

供稿：网友

这是一个基于表格的Tab，比较传统的方式完成的，配合了JavaScript技术，不懂CSS的朋友正好可以适合您，没有用到CSS因此也就可以不考虑兼容性问题，在其它浏览器下也表现良好。

<html><head><title>基于表格的Tab</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";}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 {	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;} .tdbody2 {	border-right: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;	line-height:50px;}</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">ASP</td>    <td class="taboff" id="tabman" style="cursor:hand" onClick="tabit(tabman,cman)" align="center">PHP</td>    <td class="taboff" id="tabsport" style="cursor:hand" onClick="tabit(tabsport,csport)" align="center">ASP.NET</td>    <td class="taboff" id="tableisure" style="cursor:hand" onClick="tabit(tableisure,cleisure)" align="center">VC++</td>    <td class="taboff" id="tabshoes" style="cursor:hand" onClick="tabit(tabshoes,cshoes)" align="center">VB</td>    <td class="taboff" id="tabdecor" style="cursor:hand" onClick="tabit(tabdecor,cdecor)" align="center" style="border-right: 1px solid #E3E3E3">AJAX</td>  </tr>  <tr id="cwoman" style="display:none">     <td colspan="6" class="tdbody">ASP</td>  </tr>  <tr id="cman" style="display:none">    <td colspan="6" class="tdbody">PHP</td>  </tr>  <tr id="csport" style="display:none">     <td colspan="6" class="tdbody">ASP.NET</td>  </tr>  <tr id="cleisure" style="display:none">     <td colspan="6" class="tdbody">VC++</td>  </tr>  <tr id="cshoes" style="display:none">     <td colspan="6" class="tdbody">VB</td>  </tr>  <tr id="cdecor" style="display:none">     <td colspan="6" class="tdbody">AJAX</td>  </tr></table></body></html>

上一篇：分类信息网站的超酷纯CSS菜单

下一篇：完全用Js输出的Tab选项卡