Ajouter & supprimer active de la classe à partir d'un lien de navigation
J'ai été à la recherche de tutoriels sur la façon d'ajouter et de supprimer une classe à partir d'un lien, malheureusement sans succès. Toutes les questions sur ce ont me donner une certaine compréhension, mais je n'ai pas à me donner le résultat que je veux accomplir.
J'essaie d'avoir un état actif pour ma navigation, par l'ajout et la suppression d'une classe, lorsque le lien est cliqué.
Voici ce que j'ai comme beaucoup comme JavaScript:
$(document).ready(function(){
//active state
$(function() {
$('li a').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.closest('li').children('a').removeClass('active');
$this.parent().addClass('active');
});
});
});
Et c'est ma navigation:
<div id="nav">
<div id="main-nav" class="center">
<ul>
<li><a href="/photography.php">Photography</a></li>
<li><a href="/web.php">Web</a></li>
<li><a href="/print.php">Print</a></li>
<li class="nav-R"><a href="/about.php">About</a></li>
<li class="nav-R"><a href="/contact.php">Contact</a></li>
</ul>
</div><!-- close center -->
</div><!-- close-nav -->
Je pense l'option la plus rapide serait de $("main-nav ul li").removeClass('active')
OriginalL'auteur user782245 | 2011-12-05
Vous devez vous connecter pour publier un commentaire.
Vous êtes en train de retirer les "actifs" de la classe le plus proche de l'
li
'élément enfant, et puis vous êtes en train d'ajouter la classe active à l'actuela
parentli
. Dans l'esprit de garder la classe active sur les ancrages, et non pas les éléments de la liste, ce sera le travail pour vous:Le lien actif est le lien actif. Il n'y aurait jamais plus d'un lien actif à un moment donné, donc il n'y a pas de raison d'être spécifiques sur le retrait de la
active
classe. Juste d'enlever tous les ancres.Démo: http://jsfiddle.net/rq9UB/
Il n'aurait pas fait à l'origine avec
e.preventDefault();
🙂Pourquoi avez-vous de l'onu-accepter cette réponse? Ce qui a changé?
N'avais pas réalisé que je l'onu accepter. juste une question, pour l'instant il fonctionne mais quand je clique sur (par exemple), il ajoute la classe pour le lien, mais il ne me prendra pas à la page. c'est le lien: contestabilidesigns.com/print.php
Ceci est causé par
e.preventDefault()
.e
stands pour l'événement, et l'action par défaut de l'événement est de modifier la fenêtre.emplacement pour le href. Pourquoi avez-vous la ligne dans le code si vous ne voulez pas les liens pour se comporter comme des liens?OriginalL'auteur AlienWebguy
Essayer:
Votre sélecteur était à la recherche à l'élément parent de l'actuel (
$(this)
)a
élément, et ensuite chercher parmi les enfants de cet élément pour una
. La seulea
dans cet élément est celui qui vient d'être cliqué.Ma solution plutôt se déplace jusqu'à la plus proche
ul
et puis trouve leelement that currently has the class of
active " et retire ensuite la classe.Aussi votre approche, comme publié, a été l'ajout de la
active
de nom de classe de lali
élément, et vous cherchez à supprimer le nom de classe à partir d'unea
élément. Mon approche utilise lali
, mais qui peut être modifié pour utiliser laa
en enlevant simplement leparent()
à partir de la dernière ligne.Références:
children()
.plus proche()
.find()
.OriginalL'auteur David Thomas
Je pense que vous voulez:
Je pense qu'il est ajout à l'ancre
ma compréhension est que $("li") $(ce) le point d'ancrage et puis il utilise$.parent().addClass('active'); et le li serait le parent?
OriginalL'auteur Adam Rackis
Essayez ceci:
Il suffit d'ajouter la classe .commencer à la valeur liquidative de l'élément que vous voulez avoir la classe .active en premier.
Puis de déclarer la classe .actif dans votre css comme:
OriginalL'auteur Melros