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

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
34682
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2022
-
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 !

2 réponses

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