Onglets à même fenêtre + déroulant
Shuta
Messages postés
210
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
Je tenais a remercier Jordane45 pour m'avoir aidé pour le code suivant.
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 !
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:
- Onglets à même fenêtre + déroulant
- Menu déroulant excel - Guide
- Fenetre windows - Guide
- Fenêtre hors écran windows 11 - Guide
- Restaurer les onglets chrome - Guide
- Mcafee fenetre intempestive - Accueil - Piratage
2 réponses
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 !
Merci si vous pouvez m'aider.
Bonne journée !
Bonjour,
Avec du Javascript css :
https://css-tricks.com/controlling-css-animations-transitions-javascript/
Avec du Javascript css :
https://css-tricks.com/controlling-css-animations-transitions-javascript/