Onglets

0/5 (41 avis)

Snippet vu 26 532 fois - Téléchargée 27 fois

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
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.
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
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 !
Messages postés
95
Date d'inscription
jeudi 19 août 2004
Statut
Membre
Dernière intervention
11 août 2012

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

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.