search

Home >Web Front-end >JS Tutorial >The simplest Table tab effect implemented by JS_javascript skills

The simplest Table tab effect implemented by JS_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:36:451293browse

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>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript CSS implements Mootools-like vertical flexible animated menu effect_javascript skillsNext article：JavaScript CSS implements Mootools-like vertical flexible animated menu effect_javascript skills

Related articles

See more