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 白痴级入门教程
Nov 11 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
js实现上传图片及时预览
May 07 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
详解Vue源码学习之双向绑定
Apr 10 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中用foreach来操作数组的代码
2011/07/17 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
python中xrange和range的区别
2014/05/13 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python数据类型详解(一)字符串
2016/05/08 Python
python 计算文件的md5值实例
2017/01/13 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python 获取项目根路径的代码
2019/09/27 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
android面试问题与答案
2016/12/27 面试题
高一化学教学反思
2014/02/05 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书