Onglets à même fenêtre
Résolu
Shuta
Messages postés
210
Date d'inscription
Statut
Membre
Dernière intervention
-
Shuta Messages postés 210 Date d'inscription Statut Membre Dernière intervention -
Shuta Messages postés 210 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Alors je voulais juste faire un système de petit menu a onglets. Quand on clique dessus ca l'enlève et affiche un autre a la place.
Mon code marche comme je le souhaite (juste a le complexifier un peu niveau css)
Mais en fait je voulais savoir si il y avait pas moyen de simplifier ce bout de code car c'est vraiment embêtant d'avoir toute la série a faire en javascript...
Voici mon code :
Merci beaucoup de votre aide !
Alors je voulais juste faire un système de petit menu a onglets. Quand on clique dessus ca l'enlève et affiche un autre a la place.
Mon code marche comme je le souhaite (juste a le complexifier un peu niveau css)
Mais en fait je voulais savoir si il y avait pas moyen de simplifier ce bout de code car c'est vraiment embêtant d'avoir toute la série a faire en javascript...
Voici mon code :
<div onClick="javascript: onglet1();return false;">Onglet 1</div>
<div onClick="javascript: onglet2();return false;">Onglet 2</div>
<div onClick="javascript: onglet3();return false;">Onglet 3</div>
<div onClick="javascript: onglet4();return false;">Onglet 4</div>
<div id="onglet_op_1" style="display: block;">Essai 1</div>
<div id="onglet_op_2" style="display: none;">Essai 2</div>
<div id="onglet_op_3" style="display: none;">Essai 3</div>
<div id="onglet_op_4" style="display: none;">Essai 4</div>
<script type="text/javascript">
function onglet1() {
document.getElementById('onglet_op_1').style.display='block';
document.getElementById('onglet_op_2').style.display='none';
document.getElementById('onglet_op_3').style.display='none';
document.getElementById('onglet_op_4').style.display='none';
}
function onglet2() {
document.getElementById('onglet_op_1').style.display='none';
document.getElementById('onglet_op_2').style.display='block';
document.getElementById('onglet_op_3').style.display='none';
document.getElementById('onglet_op_4').style.display='none';
}
function onglet3() {
document.getElementById('onglet_op_1').style.display='none';
document.getElementById('onglet_op_2').style.display='none';
document.getElementById('onglet_op_3').style.display='block';
document.getElementById('onglet_op_4').style.display='none';
}
function onglet4() {
document.getElementById('onglet_op_1').style.display='none';
document.getElementById('onglet_op_2').style.display='none';
document.getElementById('onglet_op_3').style.display='none';
document.getElementById('onglet_op_4').style.display='block';
}
</script>
Merci beaucoup de votre aide !
A voir également:
- Onglets à même fenêtre
- Fenetre windows - Guide
- Fenêtre hors écran windows 11 - Guide
- Restaurer les onglets chrome - Guide
- Mcafee fenetre intempestive - Accueil - Piratage
- Fenetre de navigation privée - Guide
1 réponse
Bonjour,
Voici le plus simple et le plus propre :
Cordialement,
Jordane
Voici le plus simple et le plus propre :
<html>
<head>
<title>Test</title>
<style>
#zone_menu{
display:inline-block;
border-style :solid;
height:25px;
margin-bottom:15px;
}
#zone_menu > div{
width: 100px;
float: left;
cursor:pointer;
}
</style>
</head>
<body>
<div id="zone_menu" style="display:block">
<div onClick="switchOnglet('onglet_op_1','div_onglet')">Onglet 1</div>
<div onClick="switchOnglet('onglet_op_2','div_onglet')">Onglet 2</div>
<div onClick="switchOnglet('onglet_op_3','div_onglet')">Onglet 3</div>
<div onClick="switchOnglet('onglet_op_4','div_onglet')">Onglet 4</div>
</div>
<div id="zone_onglets">
<div id="onglet_op_1" class="div_onglet" style="display: block;">Essai 1</div>
<div id="onglet_op_2" class="div_onglet" style="display: none;">Essai 2</div>
<div id="onglet_op_3" class="div_onglet" style="display: none;">Essai 3</div>
<div id="onglet_op_4" class="div_onglet" style="display: none;">Essai 4</div>
</div>
</body>
</html>
<script type="text/javascript">
/** Fonction d'affichage onglet **
Affiche l'onglet cliqué ... masque les autres
id_elm : ID de l'onglet a afficher
strClassName : Nom de la class utilisée pour identifier les onglets
*/
function switchOnglet(id_elm,strClassName){
var onglets = getElementsByClassName(strClassName);
console.log(onglets);
//on masque tous les onglets
for(var i=0; i<onglets.length; i++){
onglets[i].style.display = 'none';
}
//on affiche l'onglet identifié par son id
var ong = document.getElementById(id_elm);
ong.style.display = '';
}
/**
Retourne tous les élements ayant la même class
strClassName : Nom de la class
Return : Array
*/
function getElementsByClassName(className){
var returnElements = [];
var elements = document.getElementsByClassName(className);
for(var i=0; i<elements.length; i++){
returnElements.push(elements[i]);
}
return returnElements;
}
</script>
Cordialement,
Jordane
C'est génial et tu m'aides beaucoup =3
Le code est plus "simple" il n'y a pas à mettre 3000 lignes pour chaque catégories xD
Maintenant si je veux faire une sorte de Slide du genre glissé du haut vers le bas en se disant par exemple que la case fait 400 px de haut ?
Comment organiser ca ? Par css c'est bon avec les "transition" ?
Sans oublier de mettre celle-ci en RESOLU (lien se trouvant sous le titre de ta question).