基于表格的 Tab
这是一个基于表格的Tab，比较传统的方式完成的，配合了JavaScript技术，不懂CSS的朋友正好 可以适合您，没有用到CSS因此也就可以不考虑兼容性问题，在其它浏览器下也表现良好。
当前位置：编程学习 > JS >>
答案：<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"><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>上一个：简单漂亮的导航条
下一个：选项卡，仿msn风格
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思