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

2019-11-20 11:28:12

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-z-simple-tab-nav-menu-codes/

具体代码如下：

<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+CSS实现仿Mootools竖排弹性动画菜单效果

下一篇：JS仿淘宝实现的简单滑动门效果代码