L'exemple de cet article décrit l'effet d'onglet Tableau le plus simple implémenté par JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit de l'onglet Tableau le plus simple, qui est basé sur Tableau et n'a pas de structure DIV. Les amis habitués aux tableaux peuvent aimer cet onglet. Certaines modifications utilisent encore Tableau, comme les bordures de tableau, les couleurs d'arrière-plan, etc. Je pense personnellement que l’utilisation de Table est plus simple que l’utilisation du code de structure DIV.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/js-z-simple-tab-nav-menu-codes/
Le code spécifique est le suivant :
<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>J'espère que cet article sera utile à la programmation JavaScript de chacun.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
