[Résolu] [HTML] - Switch de catégorie

Bonjour tout le monde,

Je me présente brièvement pour mon premier message parmi vous par politesse :

Je m'appelle Arnaud, j'ai 20 ans et j'étudie actuellement dans une école d'Art & Design à Paris en WebDesign. Je code depuis pas super longtemps et c'est pour cela que votre aide me serait précieuse.

Je suis en train de créer un site internet personnel mais il m'arrive une petite étape qui me bloque à sa création. En effet, j'aurai bien aimé créer (désolé je ne connais pas le terme exacte) une espèce de colonne où quand on clique sur la catégorie titre il est possible de switch de catégorie comme sur cette page html (tout à droite) : http://cdn.livedemo00.template-help.com:82/wt_40905/

Par la même occasion, si l'un d'entre vous savait comment créer un slider similaire à celui présent sur la page web citée plus haut, je serai alors le plus heureux des codeurs .

Merci d'avance,

Cordialement.

Mister Hims

Un début de réponse avec un code qui va probablement faire sourciller les développeurs :

<ul id="menu">
	<li><a href="#" onclick="swap('partieA'); return false;">Du Aaa</a></li>
	<li><a href="#" onclick="swap('partieU'); return false;">Du Uuu</a></li>
</ul>
<div id="partieA">blabla</div>
<div id="partieU">blublu</div>

Un menu composé de deux liens. Sur chaque lien est exécutée une fonction nommée 'swap' qui envoie l'id de la div que l'on souhaite afficher. Un return false évite d'interpréter le href="#".

<style type="text/css">
	#menu li{list-style:none;}
	#menu li a{text-decoration:none;}
	#partieA{display:block;}
	#partieU{display:none;}
</style>

La première div est affichée par défaut (display:block;), la seconde non affichée (display:none;)

<script type="text/javascript">
	function swap(idPartie)
	{
		switch(idPartie)
		{
			case "partieA":
				document.getElementById("partieA").style.display="block";
				document.getElementById("partieU").style.display="none";
				break;
			case "partieU":
				document.getElementById("partieA").style.display="none";
				document.getElementById("partieU").style.display="block";
				break;
			default:
				document.getElementById("partieA").style.display="block";
				document.getElementById("partieU").style.display="none";
				break;
		}
	}
</script>

La fonction swap qui passe en argument le nom de la div concernée et dit :
Selon lenomdeladiv
cas "partieA" : partieA s'affiche, partieU s'efface
cas "partieU : partieU s'affiche, partieA s'efface
autre cas : même traitement que dans premier cas
FinSelon

Maintenant, un vrai développeur aura je pense la gentillesse d'optimiser/nettoyer tout ça.

Ensuite, si l'on veut faire d'avantages d'animations, JQuery est plus adapté. Personnellement, je pense qu'il est préférable de comprendre javascript, Ajax, avant de s'intéresser à jQuery.
C'est pourquoi je javadébuscripte.


Modifié par Manhattan (16 Mar 2013 - 21:43)

Bonsoir et merci pour cette réponse. Je vien de mettre en pratique le swap et il marche niquel ! Seul petit problème, c'est comment faire pour que la classe "active" s'applique à mon autre catégorie une celle-ci changée ? Merci encore.

PS : Lorsque je scitch justement de catégorie, le scroll se retrouve automatiquement redirigé tout en haut. Je ne sais pas si c'est dans mon code mais est-ce normal ?
Modifié par Mister-Hims (17 Mar 2013 - 22:24)

Bonjour,

Ce qui m'ennuie dans le fait de vous répondre, c'est que n'étant pas développeur, je risque de vous donner un code qui fonctionnera, mais qui ne sera pas propre, donc de mauvaises habitudes.
Aussi, j'aurais préféré qu'un développeur vienne s'immiscer dans la discussion et nous donne son avis

En attendant cela, je pourrais vous répondre que le "return false;" sert justement à éviter que le clic fasse scroller vers le haut. De même, il est aussi possible de déclencher un évènement sur une autre balise qu'un lien, et qu'ainsi l'on peut se passer de la balise a, comme sur cet exemple où j'ai directement pointé sur les li en précisant dans le css que le curseur change :

http://jsfiddle.net/mmci/Y6xET/1/

Par contre, je ne comprends pas la première partie de votre question :

a écrit :
comment faire pour que la classe "active" s'applique à mon autre catégorie une celle-ci changée ?

Et je réitère : je préférerais qu'un développeur vienne nous éclairer de ses lumières

Bonjour et merci encore,

J'ai malencontreusement oublier un mot lors de ma phrase : "comment faire pour que la classe "active" s'applique à mon autre catégorie une fois celle-ci changée ?". C'est-a-dire, que ma classe CSS active me permet d'avoir un fond de titre de différente couleur afin que l'utilisateur puisse identifier la catégorie dans laquelle il se trouve.

Bon... en attendant qu'un développeur ait la gentillesse de venir participer :

document.getElementById() permet de cibler un élément du Dom.
Ensuite, l'on peut modifier ce que l'on veut.

Dans ce nouvel exemple, je cible en plus les balises li et leur affecte une classe (classeActive) en fonction du choix, ce qui me permet d'en changer le background :

http://jsfiddle.net/Y6xET/2/

Je pense cependant qu'il existe beaucoup plus simple et optimisé, mais n'ai pour l'instant pas les compétences pour...

Ah d'accord, effectivement en répétant return false; sur ma seconde <li> le problème n'es plus. En tout cas merci bien, c'est la première fois que je touche à du jQuerry et je commence déjà à l'aimer. Pour ce qui est pour alléger le code, mon prof me donnera son avis (d'ailleurs il me semble qu'il fait partit du staff ici mais je ne connais pas son pseudo).

Bref', merci énormément ! Et par la même occasion, si par hasard il existerai un slider comme justement le site pour lequel je prend exemple dans le cas du menu swap. Merci encore !

Il ne s'agit pas de jQuery. C'est du javascript. jQuery est une bibliothèque javascript permettant d'écrire du javascript plus simplement.

Pour le slider, je n'ai pas la réponse, mais faites des recherches google sur les mots "jquery slider", et vous trouverez des dizaines voire d'avantage de scripts intéressants.

Quant au javascript, n'hésitez pas à l'apprendre, notamment grâce aux tutoriels d'alsacreations : Tutoriels Alsacréations ainsi que ceux du site du zéro : Site du zéro

Le plus important avant d'attaquer jquery n'est pas d'apprendre le javascript de A à Z, mais d'apprendre les bases de l'algorithmique par le biais d'un langage, les bases étant : déclaration et utilisation de variables, instructions conditionnelles, boucles, tableaux, fonctions...

Très bien, je vais alors prendre un peu de temps pour comprendre un peu mieux le javascript. Merci énormément de toutes vos réponses/conseils etc.