说到选项卡,随便在网上搜搜就能找到一大堆,而且都很靓,效果也很不错。但是,这些选项卡也有很多都用到了专用的 js 库,抑或是难以修改。最近几天在给人做网页,用一个 table 基于基本的 CSS 样式定义以及基本的 js 函数定义,实现了垂直选项卡的效果,写下来与大家分享,如有不当之处,欢迎指正。
1. 样式的定义
/** * 说明:用于装载垂直选项卡的表格样式定义 */ .menuTable { width: 100%; text-align:center; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } /** * 说明:垂直选项卡菜单项样式定义 */ .menuTable td { height: 40px; color:#27056a; font-size: 12px; font-weight:bold; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #64B8E4; background-image:url(../image/bg-tabset-table.jpg); background-repeat:repeat-x; cursor: pointer; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } /** * 说明:鼠标移至选项卡上时的样式定义 */ .menuTable td.hover { border-top: 1px solid #64B8E4; border-bottom:1px solid #64B8E4; color:#147AB8; background:none; }
2. 选项卡定义
<table width="800" height="300" border="1" bordercolor="#64B8E4" style="border-collapse: collapse">
<tr>
<td width="120" valign="top">
<table class="menuTable" cellspacing="0">
<tr>
<td id="td1" οnmοuseοver="displayAndHide('', 1, 3)" class="hover">
A
</td>
</tr>
<tr>
<td id="td2" οnmοuseοver="displayAndHide('', 2, 3)">
B
</td>
</tr>
<tr>
<td id="td3" οnmοuseοver="displayAndHide('', 3, 3)">
C
</td>
</tr>
</table>
</td>
<td width="680">
<table width="100%" height="100%">
<tr valign="top">
<td valign="top">
<div id="div1" style="height:295px">
Content A
</div>
<div id="div2" style="display: none;">Content B</div>
<div id="div3" style="display: none;">Content C</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
3. JS 函数定义
/** * @param menuName - 选项卡菜单的部分名称 * @param index - 当前选项卡的索引号 * @param count - 选项卡的数目 */ function displayAndHide(menuName, index, count) { for(var i = 1; i <= count; i++) { var div = document.getElementById("div" + menuName + i); var cell = document.getElementById("td" + menuName + i); div.style.display = (i == index) ? "" : "none"; cell.className = (i == index) ? "hover" : ""; } }
4. 效果预览
5. Demo 下载
附件 demo,欢迎下载。
-------------------------------------------------
Stay Hungry, Stay Foolish!
Afa
July 9th, 2010
-------------------------------------------------