Navigation via select

Fermé
biligin Messages postés 5 Date d'inscription mercredi 2 février 2011 Statut Membre Dernière intervention 8 février 2011 - 8 févr. 2011 à 16:33
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 - 9 févr. 2011 à 14:54
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 ?

3 réponses

Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
8 févr. 2011 à 16:42
Je connais pas vraiment JQuery, c'est quoi ?

Qu'est-ce que sont les attributs clicktoshow et clicktohide ?
0
biligin Messages postés 5 Date d'inscription mercredi 2 février 2011 Statut Membre Dernière intervention 8 février 2011
8 févr. 2011 à 18:59
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
0
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
9 févr. 2011 à 14:54
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>
0