1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Onglets

Onglets

Soyez le premier à donner votre avis sur cette source.

Snippet vu 26 439 fois - Téléchargée 26 fois

Commenter

Contenu du snippet

Permet d'afficher des onglets sur une page.

Source / Exemple : 


<HTML>
<HEAD>
<style>
.TabCommon {FONT: 18px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 100px;}
.TabContent {PADDING: 5px;}
.TabContentBottom {PADDING: 10px; BORDER-BOTTOM: 2px outset #99ccff;}
.TabOff {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3; BORDER-LEFT: 1px solid #BBBBBB;}
.TabOn {CURSOR: default; BORDER-TOP: 2px outset #D1D1D1; COLOR: #000000;}
.TabBorderBottom{BORDER-BOTTOM: 2px inset #D1D1D1;}
.TabActiveBorderLeftRight{BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;}
.TabActiveBackground {BACKGROUND-COLOR: #F7F8F3;}
</style>
<script>
function TabClick( nTab ){
	Col = document.getElementsByName("Content");
	for (i = 0; i < document.getElementsByName("Content").length; i++)
    	{
		document.getElementsByName("tabs")[i].className = "TabBorderBottom TabCommon TabOff";
    	document.getElementsByName("Content")[i].style.display = "none";
		}
	document.getElementsByName("Content")[nTab].style.display = "block";	
	document.getElementsByName("tabs")[nTab].className = "TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight";
}
</script>
</HEAD>
<BODY onload="TabClick(0);">

           
  <TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: 450px">
      <TR>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(0);"><NOBR>Onglet 1</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(1);"><NOBR>Onglet 2</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(2);"><NOBR>Onglet 3</NOBR></TD>
          <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(3);"><NOBR>Onglet 4 ...</NOBR></TD>
        <TD CLASS="TabBorderBottom" STYLE="width: 50px;"> </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">Texte commun   </TD>
      </TR>
      <TR>
          <TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">     
         <DIV ID="Content" NAME="Content">contenu Onglet 1</DIV>
         <DIV ID="Content" NAME="Content">contenu Onglet 2</DIV>
         <DIV ID="Content" NAME="Content">contenu Onglet 3</DIV>
         <DIV ID="Content" NAME="Content">contenu Onglet 4</DIV>
      </TD>
      </TR>
  </TABLE>

</BODY>
</HTML>

Conclusion :


Fonctionne maintenant avec Mozilla FireFox 0.8 :-)

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
1
Date d'inscription
jeudi 4 novembre 2010
Statut
Membre
Dernière intervention
5 novembre 2010
Bravo au concepteur de ce script simple, souple, ajustable. En 2010 il fonctionne très bien avec les navigateurs FF, IE, Safari, et donne un coup de jeune à mon site pépère. Merci.
Signaler
Messages postés
10
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
16 décembre 2008
c'est un très bon script vive le javascript lol
juste un truc : il vaut mieu mettre le ONCLICK en miniscule
Signaler
Messages postés
89
Date d'inscription
dimanche 21 septembre 2008
Statut
Membre
Dernière intervention
26 avril 2016
Magnifique code =D je l'utilise sur ce site =D c'est pile se que je chercher merci =D !
Signaler
Messages postés
95
Date d'inscription
jeudi 19 août 2004
Statut
Membre
Dernière intervention
11 août 2012
tres beau
Signaler
Messages postés
487
Date d'inscription
dimanche 5 octobre 2003
Statut
Membre
Dernière intervention
1 septembre 2011
salut, en relisant mon example, j'y ai trouvé une erreur:
il faut mettre:
$row_sup_html .= ' <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(' . $index . ');"><NOBR>Onglet ' . $onglet['titre'] . '</NOBR></TD>';

Et cela suppose d'avoir une table comme celle qui suit:
CREATE TABLE `onglet` (
`id` int(11) NOT NULL auto_increment,
`contenu` text NOT NULL default '',
`titre` varchar(255) NOT NULL default '',
`visibility` varchar(1) NOT NULL default '1',
KEY `id` (`id`)
) TYPE=MyISAM

après, ça doit rouler tout seul. Je verrais demain à publier un source avec cette modification.
Afficher les 41 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (francktfr)