Maison > interface Web > js tutoriel > L'effet d'onglet Tableau le plus simple implémenté par les compétences JS_javascript

L'effet d'onglet Tableau le plus simple implémenté par les compétences JS_javascript

WBOY
Libérer: 2016-05-16 15:36:45
original
1285 Les gens l'ont consulté

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>
Copier après la connexion

J'espère que cet article sera utile à la programmation JavaScript de chacun.

Étiquettes associées:
js
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal