JS实现的最简Table选项卡效果
网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了JS实现的最简Table选项卡效果,涉及简单的JavaScript响应鼠标事件切换样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现的最简Table选项卡效果。分享给大家供大家参考。具体如下:
这是一款最简易的Table选项卡,是基于Table表格的,非DIV结构,习惯表格的朋友可能会喜欢本选项卡,部分修饰仍然用的是Table,比如表格边框、背景颜色等,个人感觉好像用Table比用DIV结构代码更精简一些。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
<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程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程