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 相关文章推荐
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
实用的Vue开发技巧
May 30 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 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读取msn上的用户信息类
2008/12/05 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
Javascript之文件操作
2007/03/07 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
Python实现的多线程端口扫描工具分享
2015/01/21 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
商场中秋节活动方案
2014/02/07 职场文书
《火烧云》教学反思
2014/04/12 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
布达拉宫的导游词
2015/02/02 职场文书
护士个人年度总结范文
2015/02/13 职场文书
公司车队管理制度
2015/08/04 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis