Mettez en surbrillance active de l'élément de menu à l'aide de jquery
Je vais avoir des problèmes en soulignant mon actif, des éléments de menu.
Je suis à l'aide de CSS pour le stationnaire, mais ce que je comprends, à partir des autres postes est qu'un:active ne fonctionne pas avec le CSS?
C'est ce que j'ai fait jusqu'à présent:
HTML
<section id="nav">
<li><a class="nav" href="editorial.html">EDITORIAL</a></li>
<li><a class="nav" href="places.html">PLACES</a></li>
<li><a class="nav" href="people.html">PEOPLE</a></li>
<li><a class="nav" href="architecture.html">ARCHITECTURE</a></li>
<li><a class="nav" href="projects.html">PROJECTS</a></li>
<li><a class="nav" href="published.html">PUBLISHED</a></li>
</section>
CSS
#nav{
width:100%;
text-align:center;
min-width:1300px;
height:80px;
position:absolute;
top:0;
left:0;
background:#fff;
list-style:none;
border-bottom: 1px solid #000;
}
#nav li{
display:inline;
}
#nav .nav{
display:inline-block;
background-color:#000;
color:#FFF;
font-family: 'Oswald', sans-serif;
letter-spacing:1px;
font-size:16pt;
line-height:18pt;
font-weight:400;
text-decoration:none;
margin-right: 3px;
margin-left: 3px;
margin-top:35px;
padding:0px 3px 2px 3px;
}
#nav .nav:hover{
background:#FFFF00;
color:#000;
}
.active{
background:#FFFF00;
color:#000;
}
JQUERY
<script>
$(document).ready(function() {
$("#nav li .nav").click(function ( e ) {
e.preventDefault();
$("#nav li a.active").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
//$(activeTab).show(); //Fade in the active content
});
});
Merci d'avance!
Que voulez-vous dire "
Ce genre de difficultés? J'ai créé un violon à partir de votre posté code et planant sur les éléments saillants. jsfiddle.net/slippery_pete/8495h3L3
Le hover n'est pas ce qui me trouble, je voudrais l'arrière-plan pour rester en jaune lorsque le lien est actif.
:active
ne fonctionne pas avec les CSS"? Il n'a certainement "travail", mais peut-être pas de la façon que vous attendez: css-tricks.com/almanac/selectors/a/activeCe genre de difficultés? J'ai créé un violon à partir de votre posté code et planant sur les éléments saillants. jsfiddle.net/slippery_pete/8495h3L3
Le hover n'est pas ce qui me trouble, je voudrais l'arrière-plan pour rester en jaune lorsque le lien est actif.
OriginalL'auteur krubkiewicz | 2014-08-14
Vous devez vous connecter pour publier un commentaire.
J'ai mis à jour le code pour utiliser un seul événement de clic sur le conteneur parent et dans la fonction réduit le DOM traversals. MAIS, vous devez également mettre à jour votre CSS. Vous n'obtenez pas la couleur d'arrière-plan à cause de la spécificité. Vous avez spécifié la couleur d'arrière-plan et en vol stationnaire à l'aide de la
#nav
id. Si vous avez besoin de spécifier le .classe active de cette façon.Si je peut résoudre un nouveau problème qui viennent de ce fait, les éléments du menu ne fonctionnent pas. Quand je clique sur un élément de menu, il reste mis en évidence mais ne pas me diriger vers la page suivante. Des idées?
e.preventDefault();
arrête l'action par défaut du lien de l'empêchant de réellement aller n'importe où. Si vous rechargez la page, vous aurez besoin de passer autour de laquelle onglet à mettre en évidence. Les autres options est d'utiliser AJAX pour charger la page.Si vous devez recharger la page, vous devriez envisager d'utiliser css pour mettre en surbrillance l'actuel nav élément au lieu de javascript. Consultez ce lien pour plus d'informations: stackoverflow.com/questions/10646775/active-menu-highlight-css
Utilisation sans
e.preventDefault();
OriginalL'auteur Gary Storey
J'ai utilisé le code suivant. Réponse tardive, mais j'espère que cela aidera quelqu'un.
e.preventDefault();
il a arrêté le lien de travail. Cela signifie également que la page est sélectionnée lorsque vous allez à elle, et pas seulement lorsque vous cliquez sur elle. MerciCe que j'ai fait est que j'ai gardé le code en dehors d'un gestionnaire de clic, de sorte que le code des incendies de n'importe quelle page vous êtes sur sans dépendre d'un événement de clic à exécuter. Donc, plutôt que de cliquer sur une barre de navigation de lien et la visite d'une nouvelle page (en détruisant l'effet), il suffit que le code s'exécute sur le chargement de la page donnant la souhaitée de l'élément nav mise en évidence. TLDR: Ne faites pas l'élément nav soulignant dépend d'un clic sur un lien, l'ajouter à votre app.js de sorte qu'il peut se déclencher après tout chargement de la page.
OriginalL'auteur Vajira Lasantha
essayez ceci:
vous avez manqué certains
#
et aussi, pas besoin d'utiliser$("a", this)
$(this)
va faire le travail!OriginalL'auteur Amin Jafari
J'ai été confronté à ce problème. - Je résoudre ce que.
Vous pouvez enregistrer jsfiddle démo local et vous pouvez tester.
OriginalL'auteur Kabir Hossain
J'ai résolu ce problème simplement en parcourant mon Menu d'Url et de les mettre en adéquation avec la active de l'Url de la page puis ajouter les actifs de la classe css à la trouvé de résultat. Cela a fonctionné pour moi:
OriginalL'auteur daviek19
Prendre
text
de#page-indicator
et de l'ensemble de la classeactive
à<li><a href="#">text</a></li>
.OriginalL'auteur Jiří Zapletal