Créer un compte
Connexion

Système d'onglets en Javascript, (X)html et CSS dans la même page


Système d'onglets en Javascript, (X)html et CSS dans la même page Système d'onglets en Javascript, (X)html et CSS dans la même page Le 29/07/2013 à 04:51:42
Note: 4/5
Mots clés: système d'onglet javascript html css sans rechargement même page script javascript js onglet partie séparer contenu en onglets

Bonjour,
dans ce script, je vais vous montrer comment faire un système d'onglets utilisant l'(X)html, le CSS et le Javascript.
Il n'a besoin que d'une seule page pour fonctionner.
Ce système ne nécessite pas de recharger la page pour acceder à un autre onglet.
Il est compatible avec tout les navigateurs.

Pour le fonctionnement, c'est simple, les contenus de tout les onglet seront cachés, seul celui qui est ouvert sera affiché.
Lorsque quelqu'un change d'onglet, une fonction Javascript modifie le style du bouton de l'ancien onglet, cache son contenu, modifie le style du bouton de l'onglet choisi et affiche son contenu.

Voici le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un syst&egrave;me d'onglet en javascript</title>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->
</script>
<style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Quoi?</h1>
Un simple syst&egrave;me d'onglet utilisant les technologies:<br />
<ul>
<li>(X)html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h1>Qui?</h1>
C'est un script r&eacute;alis&eacute; par Ybouane,<br />
Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div>
</div>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
//-->
</script>
</body>
</html>
Essayer

L'utilisation du script est assez simple,
pour faire un onglet, il faut ajouter:
dans la partie onglets:
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span> et dans la partie contenus:
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>
j'espère que vous avez compris le principe.

C'est tout pour ce script!
merci, j'espère que vous avez aimés ce script et qu'il vous sera utile :)

Scripts et Tutoriels similaires

Recharger/Actualiser une page en javascript Recharger/Actualiser une page en javascript Faire des onglet en (X)html/CSS Faire des onglet en (X)html/CSS Faire un input file stylé en Css (X)html et Javascript Faire un input file stylé en Css (X)html et Javascript Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Faire un calendrier en javascript  avec un effet de transparence Faire un calendrier en javascript avec un effet de transparence