Aspect onglet qui reste tant qu'un autre n'est pas cliqué jQuery

gintoxic Messages postés 524 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
je cherche à faire un systeme d'onglet(<li>) dont le background se colore au click et reste coloré tant qu'un autre n'est pas cliqué. et cela pour chaque onglet du menu.
J'ai recherché sur le net mais rien à faire.
Je ne peux visiblement pas utiliser de fonction banale puisqu'il s'agit d'agir sur la page qui va être affichée après le click...
Je fonctionne en Jquery et je n'y arrive pas.

Si vous avez une piste,merci de m'en faire part

cordialement

1 réponse

animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut

En jquery

$(document).ready(function() {
$("#menu a").each(function() {
if (this.href == window.location) {
$(this).css("background","red");
};
});
});


ou

$(function () {
setNavigation();
});

function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);

$("#menu a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}


(ici tu dois ajouter dans le css une class active avec le background)
http://jsfiddle.net/DDZNz/


si le href reprend toute l'url il faut utiliser window.location.href

pour le html
<div id="menu">
<ul>
<li><a href="">page</a></li>
<li><a href="">page</a></li>
<li><a href="">page</a></li>
<li><a href="">page</a></li>
</ul>
</div>


voila

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
0