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   -
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 ?
A voir également:

3 réponses

Fetide68 Messages postés 745 Date d'inscription   Statut Membre Dernière intervention   32
 
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   Statut Membre Dernière intervention  
 
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 745 Date d'inscription   Statut Membre Dernière intervention   32
 
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