每日更新|TOP排行榜|Tag标签|充值

无忧首页网页模板程序模板建站教程视频教程网页特效图标素材字体下载站长工具站长问答

网页特效代码模板无忧>网页特效>菜单导航特效代码>

收藏分享查看评论菜单导航

基于表格的 Tab_菜单导航特效

查看演示效果

特效Tag：选项卡 Tab 添加

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基于表格的Tab</title>
<meta http-equiv="Content-Type" mrc="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"><a href="#">ASP</a></td>
  </tr>
  <tr id="cman" style="display:none">
    <td colspan="6" class="tdbody"><a href="#">PHP</a></td>
  </tr>
  <tr id="csport" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">ASP.NET</a></td>
  </tr>
  <tr id="cleisure" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">VC++</a></td>
  </tr>
  <tr id="cshoes" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">VB</a></td>
  </tr>
  <tr id="cdecor" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">AJAX</a></td>
  </tr>
</table>
</body>
</html>

所属频道：菜单导航特效/更新时间：2012-11-04

[收藏][报错][返回列表]

相关菜单导航特效：

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些

相关链接：
复制本页链接| 搜索基于表格的 Tab
特效说明：
菜单导航模板-基于表格的 Tab。