Onglets à même fenêtre

Résolu/Fermé

Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 - 10 mai 2016 à 02:46
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 - 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 !

A voir également:

Onglets à même fenêtre
Restaurer onglets chrome - Guide
Raccourci agrandir fenetre - Guide
Fenêtre hors écran windows 11 - Guide
Fenêtre - Guide
Fenetre privée - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
Modifié par jordane45 le 10/05/2016 à 13:19

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 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
10 mai 2016 à 17:16

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" ?

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021
10 mai 2016 à 17:21

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).

Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
10 mai 2016 à 18:07

Très bien merci !

Discussions similaires

Conhost.exe

Comment supprimer les onglets?

onglets qui restent ouverts

Impossible de trouver l'icône "onglets" sur le J3 2016

Les onglets restent ouverts