Onglets à même fenêtre

Résolu

Shuta Messages postés 217 Statut Membre -
Shuta Messages postés 217 Statut Membre - 10 mai 2016 à 18:07

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 !

Afficher la suite

1 réponse

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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

Shuta Messages postés 217 Statut Membre 3

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
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830 > Shuta Messages postés 217 Statut Membre
  
  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
Shuta Messages postés 217 Statut Membre 3

Très bien merci !
0

Onglets à même fenêtre

1 réponse

Discussions similaires

Newsletters