说到选项卡,随便在网上搜搜就能找到一大堆,而且都很靓,效果也很不错。但是,这些选项卡也有很多都用到了专用的 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" onmouseover="displayAndHide('', 1, 3)" class="hover">
A
</td>
</tr>
<tr>
<td id="td2" onmouseover="displayAndHide('', 2, 3)">
B
</td>
</tr>
<tr>
<td id="td3" onmouseover="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
-------------------------------------------------
分享到:
相关推荐
table选项卡
采用Table CSS实现的TabPane选项卡
Table+CSS实现的TAB选项卡! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
Table+CSS实现的TabPane 选项卡代码实例! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
微信小程序底部导航加顶部table选项卡实现。
Table自作的选项卡,获取更好、更方便的选项卡。给您以跟好的帮助。试试···很棒的
table表格样式利用jqgrid实现
这是是课本关于andorid的ui那节,选项卡的三种实现方法,可能有些问题,需要在本地改改
稀里糊涂的想整个table选项卡从A页面点击进入B页面指定版块,不知道怎么描述就先这样叫吧。
swt table 实现换行
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽。Bootstrap Table可拖动列,需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-...
table的实现,如何实现table,往table里面添加数据
实现了bootstrapTable 的列宽可鼠标拖动,方便查看列宽显示不完全的内容,前台js
本文实例讲述了JS实现的最简Table选项卡效果。分享给大家供大家参考。具体如下: 这是一款最简易的Table选项卡,是基于Table表格的,非DIV结构,习惯表格的朋友可能会喜欢本选项卡,部分修饰仍然用的是Table,比如...
el-table实现选择列显示.zip
基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...
Material Design风格实用Tabs选项卡,项目实用,希望有所帮助。
DevExpress+XtraTabControl选项卡准确关闭方法实现代码