The simplest Table tab effect implemented by JS_javascript skills-JS Tutorial-php.cn

The simplest Table tab effect implemented by JS_javascript skills

WBOY

Release： 2016-05-16 15:36:45

Original

1277 people have browsed it

The example in this article describes the simplest Table tab effect implemented by JS. Share it with everyone for your reference. The details are as follows:

This is the simplest Table tab, which is based on Table and has no DIV structure. Friends who are used to tables may like this tab. Some modifications still use Table, such as table borders, background colors, etc. , I personally feel that using Table is more streamlined than using DIV structure code.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-z-simple-tab-nav-menu-codes/

The specific code is as follows:

<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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.