Navigation via select
biligin
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
Fetide68 Messages postés 745 Date d'inscription Statut Membre Dernière intervention -
Fetide68 Messages postés 745 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je souhaite réaliser une navigation dans différents div grâce à un select.
J'ai réalisé le select suivant :
<select class="toggle_tabs" id="toggle_tabs_unused" name="cat" }>
<option clicktoshow="mode" clicktohide="musique, art, design" class="selected">Mode</option>
<option clicktoshow="musique" clicktohide="mode, art, design" >Musique</option>
<option clicktoshow="art" clicktohide="mode, musique, design" >Art</option>
<option clicktoshow="design" clicktohide="mode, musique, art" >Design</option>
</select>
sachant que cette navigation sera utilisé sur une page fan facebook et qu'il ne supporte pas le jquery, je souhaite réaliser la fonction javascript qui va me permettre de réaliser l'affichage d'un div et de masquer les autres div.
si quelqu'un pourrait m'aider ?
je souhaite réaliser une navigation dans différents div grâce à un select.
J'ai réalisé le select suivant :
<select class="toggle_tabs" id="toggle_tabs_unused" name="cat" }>
<option clicktoshow="mode" clicktohide="musique, art, design" class="selected">Mode</option>
<option clicktoshow="musique" clicktohide="mode, art, design" >Musique</option>
<option clicktoshow="art" clicktohide="mode, musique, design" >Art</option>
<option clicktoshow="design" clicktohide="mode, musique, art" >Design</option>
</select>
sachant que cette navigation sera utilisé sur une page fan facebook et qu'il ne supporte pas le jquery, je souhaite réaliser la fonction javascript qui va me permettre de réaliser l'affichage d'un div et de masquer les autres div.
si quelqu'un pourrait m'aider ?
A voir également:
- Navigation via select
- Navigation privée - Guide
- Supprimer les données de navigation - Guide
- Simulateur de navigation maritime gratuit - Télécharger - Loisirs créatifs
- Via michelin carte - Télécharger - Transports & Cartes
- Partager des photos via un lien - Guide
3 réponses
Je connais pas vraiment JQuery, c'est quoi ?
Qu'est-ce que sont les attributs clicktoshow et clicktohide ?
Qu'est-ce que sont les attributs clicktoshow et clicktohide ?
JQuery est une librairie qui permet de simplifier des commandes javascript et de réalisé simplement des animations, etc ...
voici le lien du site officiel : https://jquery.com/
les attributs clicktoshow et clicktohide me permettent d'afficher ou de masquer des éléments (fonctionne que sous firefox)
c'est pour ça que je souhaite intégrer du javascript pour que la navigation puisse se faire peu importe le navigateur
voici le lien du site officiel : https://jquery.com/
les attributs clicktoshow et clicktohide me permettent d'afficher ou de masquer des éléments (fonctionne que sous firefox)
c'est pour ça que je souhaite intégrer du javascript pour que la navigation puisse se faire peu importe le navigateur
Désolé pour le temps de réponse, voici peut-être un élément de réponse (tu peux tester le script en l'état, ça marche sous ie et ff) :
<!-- Le Javascript à mettre dans les balises head ou dans un fichier séparé //--> <script> // Edition de la fonction function masquerDiv(valeur) { var valeurs=["mode","musique","art","design"]; // Un tableau de valeurs (array) avec les différents id à afficher ou à maquer. var i; // Déclaration de i pour faire la boucle for (i=0;i<valeurs.length;i++) { // la boucle qui parcourt le array if (valeurs[i]!=valeur) document.getElementById(valeurs[i]).style.display="none"; // Si la valeur ne correspondf pas à celle envoyé par l'appel de la fonctuon (valeur)<->(this.value), on masque ladiv dont l'id est égal à la valeur de l'index de l'id (valeurs[i]) else document.getElementById(valeur).style.display="block"; // Sinon, ben sinon on affiche la div... } } </script> <form method="post"> <select class="toggle_tabs" onchange="masquerDiv(this.value);"> <option value="mode">Mode</option> <option value="musique">Musique</option> <option value="art">Art</option> <option value="design">Design</option> </select> </form> <div id="mode" style="display: block;">Mode</div> <div id="musique" style="display: none;">Musique</div> <div id="art" style="display: none;">Art</div> <div id="design" style="display: none;">Design</div>