Créer des onglets facilement

Dimanche 5 octobre 2008

Langage : JavaScript - Type : Script - Niveau : Débutant

Voici un script permettant de créer très facilement des onglets.
Nous allons utiliser 3 langages :

La struxcture XHTML, qui met en page les onglets. Cette structure est divisé en deux partie, la partie haute regroupant les onglets <div id= »mes_onglets »></div> et la partie basse regroupant les contenus à afficher <div id= »mes_contenus »></div>

^?View Code HTML

<div id="mes_onglets">
	<ul>
		<li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
		<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
		<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
		<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
		<li class="mon_onglet"><a href="http://www.google.fr" target="_blank">Lien</a></li>
		<div class="clear"></div>
	</ul>
</div>
<div id="mes_contenus">
	<div id="co_1" class="mon_contenu">Mon contenu 1</div>
	<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
	<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
	<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div>

Le CSS contenant toutes les classes nécéssaires à l’apparence des onglets.

Ce code doit être placé entre les balises <head></head> de la structure xhtml.

^?View Code CSS

*{
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
body{
	width: 400px;
	margin: 10px auto;
}
a{
	text-decoration: none;
	color: #666;
}
ul, li{
	list-style: none;
}
.mon_onglet{
	float: left;
	padding: 2px 10px;
	margin-right: 5px;
	color: #333;
	background: #d8f8ca;
	border: 1px solid #68ce3e;
	cursor: pointer;
	margin-bottom: -1px;
}	
.mon_onglet:hover{
	background: #b8efa1;
}				
.mon_onglet_selected{
	float: left;
	padding: 2px 10px;
	margin-right: 5px;
	color: #333;
	background: #b8efa1;
	border-top: 1px solid #68ce3e;
	border-right: 1px solid #68ce3e;
	border-left: 1px solid #68ce3e;	
	border-bottom: 1px solid #b8efa1;	
	cursor: pointer;	
	margin-bottom: -1px;
}					
.clear{
	clear: both;
}
.mon_contenu{
	color: #666;
	background: #b8efa1;
	border: 1px solid #68ce3e;
	padding: 10px;				
}
#mes_contenus, #mes_onglets{
	width: 400px;
}

Et le javascript qui va rendre nos onglets dynamiques.

Nous avons une fonction changeOnglet(); qui, lorsque l’on clique sur un onglet, change le statut de tous les onglets.

Ce code doit être aussi placé entre les balises <head></head> de la structure xhtml.

^?View Code JAVASCRIPT

function changeOnglet(_this){
	var getOnglets 	= document.getElementById('mes_onglets').getElementsByTagName('li');
	for(var i = 0; i < getOnglets.length; i++){
		if(getOnglets[i].id){
			if(getOnglets[i].id == _this.id){
				getOnglets[i].className = 'mon_onglet_selected';
				document.getElementById('c' + _this.id).style.display 			= 'block';
			}
			else{
				getOnglets[i].className = 'mon_onglet';
				document.getElementById('c' + getOnglets[i].id).style.display 	= 'none';
			}
		}
	}			
}

Exemple

Téléchargement

Télécharger l'exemple

Cet article a été écrit par :

Johnstyle - qui est l'auteur de 11 article(s).

"Savoir ce que tout le monde sait, c'est ne rien savoir. Le savoir commence là où commence ce que le monde ignore."

Contacter l'auteur

Share and Enjoy: Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.

4 Commentaires

Allan
Lundi 10 novembre 2008 at 19 h 36 min
Bonjour,

Tout d’abord merci pour ce très bon script très utile.
J’ai remarqué que sur votre site lyonmagazine.fr vous avez fait une présentation similaire à la différence que les onglet défile automatiquement. J’aurais voulu savoir comment vous réalisez ce petit effet. Je pense et suppose que c’est fait en javascript mais je n’en sais pas plus.

En tout cas vos site sont tous très beau graphiquement félicitation.:smile:

Merci d’avance pour votre réponse.
imars
Jeudi 27 novembre 2008 at 10 h 43 min
Oh merci pour ce script.
Fonctionne très bien sous Firefox et IE parfait…
ClicClac
Mercredi 18 février 2009 at 5 h 50 min
Parfait ce script.
J’apprécie qu’il travaille sur le et pas sur le <a> comme souvent.

Comment le modifier pour qu’un clic sur un onglet ’selected’ referme le correspondant ?
fred
Mardi 3 mars 2009 at 15 h 59 min
super ton script !
j’ais essayer avec des pages perso mais dans mes onglets j’inclus d’autre page et lorsque je valide un formulaire sur l’onglet 2 par exemple, cela recharge ma page et donc revient sur le 1er onglet :/
ya t’il un moyen de resté sur le même onglet sur lequel on travail ?
(passer un hyden par exemple et selectionner l’onglet selon l’hyden… ?)

Développement Web – Johnstyle