Sujet Précédent Sujet Suivant

Onglets à même fenêtre + déroulant

Fermé
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 - Modifié par Shuta le 11/05/2016 à 02:59
jordane45 Messages postés 37532 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2023 - 13 mai 2016 à 09:41
Bonjour,

Je tenais a remercier Jordane45 pour m'avoir aidé pour le code suivant. 
<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>


Maintenant j'ai une question : Comment faire en sorte que quand je clique sur un onglet, au lieu que ça prenne la place d'un coup, ca vienne en se déroulant dessus de haut en bas ?

De plus, si c'est possible de changer la couleur du background de l'onglet sélectionné ? comme si il était en "active".

Merci de votre aide !
A voir également:

2 réponses

Réponse 1 / 2
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
13 mai 2016 à 05:07
Bonjour, ca fait 1 jour et demi et je n'ai toujours pas de réponse ni de solution ;-;
Merci si vous pouvez m'aider.
Bonne journée !
0
Réponse 2 / 2
jordane45 Messages postés 37532 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2023 4 585
13 mai 2016 à 09:41
Bonjour,

Avec du Javascript css :
https://css-tricks.com/controlling-css-animations-transitions-javascript/
0