信鸽网

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

  作者：bea

本文实例讲述了JS实现的最简Table选项卡效果。分享给大家供大家参考。具体如下： 这是一款最简易的Table选项卡，是基于Table表格的，非DIV结构，习惯表格的朋友可能会喜欢本选项卡，部分修饰仍然用的是Table，比如表格边框、背景颜色等，个人感觉好像用Table比用DIV结构代码更精简一些。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/js-z-simple-tab-nav-menu-codes/ 具体代码如下： <h

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


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


运行效果截图如下：



在线演示地址如下：


http://demo./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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: