Discussion :

[Lionel_aw]

Bonjour,

je suis en train de mettre en place une technique pour mettre en valeur dans un menu le lien de la page visité.

Mes liens sont dans les panneaux d'un accordéon toujours visible et je voudrais que le lien de la page en cours soient affiché avec un style différent.
j'ai pensé à la technique suivante et je voudrais savoir si elle n'est pas trop tordue et si elle et correcte par rapport aux usages de développement.

l'accordéon est contenu dans un div <div id="main">

pour chaque page, je rajoute un attribut alt avec une valeur unique.

<div id="main" alt="ab00">


Dans mon accordéon, chaque balise <a> de lien a un ID unique qui correspond à la page vers laquelle ce lien pointe.

<li class="menuLink"><p><a id="ab00" href="/html/la-gargouille.php?id=0"><img src="/images/th/thb_gargouille.jpg" /> ... etc

dans mon code Jquery, je récupère la valeur de l'attribut ALT et je cherche le lien qui a cet ID puis je lui modifie son css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var linkName = "#"+ $("#main").attr("alt");
$(linkName).css({
	"color":"green",
	"border": "1px solid red"
	});

cette méthode fonctionne, qu'en pensez vous ??
au début je voulais utiliser l'attribut TITLE mais dans ce cas la valeur de l'attribut s'affiche au survol du DIV.

[SpaceFrog]

pourquoi vouloir réinventer le fil a couper la poudre d'eau tiède ?

il suffit d'attribuer un className ...
ou simplement utiliser le css et la pseudo classe visited ...

[Lionel_aw]

pourquoi vouloir réinventer le fil a couper la poudre d'eau tiède ?

il suffit d'attribuer un className ...
ou simplement utiliser le css et la pseudo classe visited ...

oui, mais je veux que le lien n'ait le css que dans un cas précis....
c'est à dire lorsque la page affichée est celle pointée par le lien.

si tu as une technique plus simple je suis preneur...

[Lionel_aw]

Peut être devrais préciser que mon menu est dans un fichier unique en php que je charge avec un include donc je ne sais pas à l'avance quel lien je dois mettre en exergue...

c'est le contexte donné par l'attribut ALT que je rajoute dans chaque page qui me donne un couple page/lien unique.

[SpaceFrog]

ben colle juste un classeName ...
ta page est genérée par php ?

[Lionel_aw]

ben colle juste un classeName ...

en changeant le css, c'est comme si j'attribuais une classe.. non??
pour que je ne modifie qu'un seul lien il faut bien que je le caractérise dans un contexte précis, celui de la page visée... non?

ta page est genérée par php ?

Pas vraiment non, mais j'ai mis le menu dans un fichier unique que je charge avec un include, comme ça si je dois modifier un lien, je n'ai pas à modifier 40 ou 50 pages html, ça va de soi...
C'est uniquement cet include qui justifie l'utilisation de php.

[SpaceFrog]

oui modifier le css revient au même au final
mais attribuer un className est plus rapide et facile a maintenir

[Lionel_aw]

oui modifier le css revient au même au final
mais attribuer un className est plus rapide et facile a maintenir

mais en fait qu'appelles tu un className? c'est une fonction spéciale de jQuery?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.pageactuelle {
 color:red;}
 
.autrepage {
color:black;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a id="lien" class="autrepage">lkjlkjlkj</a>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="button" onclick="$('#lien').toggleClass('pageactuelle');" value="test" />

[Lionel_aw]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="button" onclick="$('#lien').toggleClass('pageactuelle');" value="test" />

ah oui, et bien non, dans mon cas ça ne peut pas marcher car à chaque click je charge une nouvelle page qui elle charge le menu par l'intermédiaire de l'include... donc le seul moyen de savoir quel lien a été cliqué, il m'a semblé que c'était en associant un attribut de la nouvelle page qui a la même valeur que l'ID du lien cliqué...

en passant par l'include d'un fichier php pour le menu, je centralise le menu dans un seul fichier et j'accélère le chargement puisque ce fichier reste dans le cache.

j'espère que je suis clair dans mon exposé.
La technique fonctionne parfaitement, je voulais juste savoir si il en existait d'autres.

[SpaceFrog]

si c'est une nouvelle page qui est chargé à chaque fois :

soit tu peux mettre le class avec un langage serveur
soit tu seras obligé de passer un id dans l'url en get et recupérer l'id au chargement de ta page pour attribuer le class

[Lionel_aw]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="button" onclick="$('#lien').toggleClass('pageactuelle');" value="test" />

je me pose une question sur ton exemple...

si on applique toggleClass sur un élément qui a dejà une classe, il la garde?
dans le cas de ton exemple, le #lien ne finirait pas avec les deux classes...??
.pageactuelle et .autrepage qui ont des valeurs contradictoires...

[SpaceFrog]

non toggle classe fait un swap ...

addClass ajoute

[Lionel_aw]

non toggle classe fait un swap ...

addClass ajoute

merci pour la précision utile ....

[Lionel_aw]

soit tu seras obligé de passer un id dans l'url en get et recupérer l'id au chargement de ta page pour attribuer le class

finalement c'est ce que je fais, en ayant mis au préalable un attribut alt dans la page qui est chargée et en récupérant cet attribut avec $("#main").attr("alt");

En fait je voulais savoir si la balise alt pouvait servir à cela, tout en restant dans les 'règles de l'art'....

[SpaceFrog]

ta logique m'echappe ????

si tu peux mettre un truc dasn le alt ... pourquoi tu peux pas directement le mettre dans le class ????

[Lionel_aw]

ta logique m'echappe ????

si tu peux mettre un truc dasn le alt ... pourquoi tu peux pas directement le mettre dans le class ????

parce que le fait de savoir si un lien du menu a telle classe dépend de quelle page est chargée et le menu est unique, donc je ne peux pas le savoir à l'avance.

par exemple le lien a#b01 n'aura la classe .bidule que si la page ayant l'attribut alt="b01" (dans la div contenant le menu) est chargée...

[SpaceFrog]

le menu est unique ...

tu le charges comme dans ta page ???

[Lionel_aw]

le menu est unique ...

tu le charges comme dans ta page ???

comme ça ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php include('menu.inc.php'); ?>

en fait il contient une partie du <head> le début du <body>, l'entête et le menu qui sont communs à toutes les pages....

[SpaceFrog]

ben ?????

mets dans ton menu la classe avec php ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

class="<?php  echo (testsurpage) ?'active':'pasactive'; ?>"