DevKB
Web Development Knowledge Base
HOME | TOP 20 | WRITE AN ARTICLE |
Sections :



RSS RSS Feed

You too, please publish your useful code snippets in any programming language :
write an article !


Valid HTML 4.0 Transitional

Plateforme d'envoi de gros fichiers en ligne
Dépannage site web
Blog infogérance
Hébergement e-mail

Aurélie Dufour - - 19/03/2008 - vue 8724 fois

Système d'onglets très simple en DHTML

A copier-coller dans votre éditeur préféré ! ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Système d'onglets</title>
<style type="text/css">
#onglet1{
display: block;
}
#onglet2, #onglet3, #onglet4, #onglet5{
display: none;
}
</style>
<script type="text/javascript">
function voirOnglet(id){

//on cache les onglets
//i varie selon le nombre d'onglets : à modifier selon vos besoins
for(var i=1;i<=5;i++)
{
document.getElementById('onglet'+i).style.display='none';
}

//afficher les onglets quand on clique sur un lien du menu
if(document.getElementById(id).style.display =='none')
{
document.getElementById(id).style.display = 'block';
}

}
</script>
</head>

<body>

<div class="titreOnglet">
<a href="#" onclick="voirOnglet('onglet1');"> Onglet 1 </a> |
<a href="#" onclick="voirOnglet('onglet2');"> Onglet 2 </a> |
<a href="#" onclick="voirOnglet('onglet3');"> Onglet 3 </a> |
<a href="#" onclick="voirOnglet('onglet4');"> Onglet 4 </a> |
<a href="#" onclick="voirOnglet('onglet5');"> Onglet 5 </a>
</div>

<div id="onglet1">
Onglet 1<br />
blabla
</div>

<div id="onglet2">
Onglet 2<br />
lorem ipsum
</div>

<div id="onglet3">
Onglet 3<br />
doloret sit
</div>

<div id="onglet4">
Onglet 4<br />
amet nec
</div>

<div id="onglet5">
Onglet 5<br />
nunc sit elit
</div>

</body>
</html>




Write a comment :
Your name :     E-mail (optional) :

AntiSpam : what animal is visible on this picture ? :

Nos partenaires : iPhone 8 Cases & Protection