JS实现的最简Table选项卡效果


Posted in Javascript onOctober 14, 2015

本文实例讲述了JS实现的最简Table选项卡效果。分享给大家供大家参考。具体如下:

这是一款最简易的Table选项卡,是基于Table表格的,非DIV结构,习惯表格的朋友可能会喜欢本选项卡,部分修饰仍然用的是Table,比如表格边框、背景颜色等,个人感觉好像用Table比用DIV结构代码更精简一些。

运行效果截图如下:

JS实现的最简Table选项卡效果

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<style type="text/css">
<!--
.menu1 {
   font-size: 14px;
   color: #FFFFFF;
   text-decoration: none;
   background-color: skyblue;
   cursor:hand;
}
.menu2 {
   font-size: 14px;
   color: #990000;
   text-decoration: none;
   background-color: #FFFFFF;
   cursor:hand;
}-->
</style>
<script language="JavaScript">
function tabit(id,cid) {
tab1.className="menu2";
tab2.className="menu2";
id.className="menu1";
ctab1.style.display="none";
ctab2.style.display="none";
cid.style.display="block";
}
</script>
</head>
<body onload="tabit(tab1,ctab1)">
<table width="400" height="169" border="0" cellpadding="3" cellspacing="1" bgcolor="#990000">
  <tr>
   <td height="20" class="menu1" id="tab1" onmouseover="tabit(tab1,ctab1)">今日焦点</td>
   <td height="20" class="menu2" id="tab2" onmouseover="tabit(tab2,ctab2)">一周热门</td>
  </tr>
  <tr id="ctab1" style="display:none">
   <td height="100" colspan="2" bgcolor="#FFFFFF">今日焦点的内容</td>
  </tr>
  <tr id="ctab2" style="display:none">
   <td height="100" colspan="2" bgcolor="#FFFFFF">一周热门的内容</td>
  </tr>
</table>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
js有关元素内容操作小结
Dec 20 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
如何使用CocosCreator对象池
Apr 14 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 #Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 #Javascript
smartcrop.js智能图片裁剪库
Oct 14 #Javascript
深入学习JavaScript对象
Oct 13 #Javascript
快速学习JavaScript的6个思维技巧
Oct 13 #Javascript
有关json_decode乱码及NULL的问题
Oct 13 #Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 #Javascript
You might like
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
python九九乘法表的实例
2017/09/26 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
初中生操行评语大全
2014/04/24 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
讲座通知范文
2015/04/23 职场文书
消防安全月活动总结
2015/05/08 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python