Onglets à même fenêtre

Résolu/Fermé
Signaler
Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
-
Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
-
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 :

<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 !

1 réponse

Messages postés
34682
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2022
4 000
Bonjour,

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                                                                 
0
Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
4
Merci beaucoup !
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" ?
0
Messages postés
34682
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2022
4 000 >
Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021

Là c'est une nouvelle question.... et donc... comme le veut la coutume .. tu dois ouvrir une nouvelle discussion.
Sans oublier de mettre celle-ci en RESOLU (lien se trouvant sous le titre de ta question).
0
Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
4
Très bien merci !
0