使用jQuery进行主动导航-无法将默认类应用于锚点 [英] Active navigation with jQuery - can't apply a default class to anchor
问题描述
我目前正在尝试制作一个 navigation-menu
(导航菜单),其中将 active-class
应用于其 href
属性与当前网址,因此我可以为锚定样式,使其在菜单的其余部分中脱颖而出.
I am currently trying to make a navigation-menu
where an active-class
is applied to the anchors whose href
attributes that match the current URL, so I can style that anchor in a way that makes it stand out from the rest of the menu.
这是我的标记:
<div id="sidebar">
<h2>Navigation menu</h2>
<h2 class="subnav"><a href="menu1/menu_item1">Menu item 1</a></h2>
<h2 class="subnav"><a href="menu1/menu_item2">Menu item 2</a></h2>
<h2 class="subnav"><a href="menu1/menu_item3">Menu item 3</a></h2>
<h2 class="subnav"><a href="menu1/menu_item4">Menu item 4</a></h2>
<h2 class="subnav"><a href="menu1/menu_item5">Menu item 5</a></h2>
</div>
这是jQuery:
jQuery(function($) {
// get the current url
var path = location.pathname.substring(1);
// defining the top subnav anchor
var $top_item = $('#sidebar h2:nth-child(2) a');
// defining all subnav anchors
var $all_items = $('#sidebar h2.subnav a');
// defining the anchors with a href that matches the current url
var $selected_item = $('#sidebar h2 a[@href$="' + path + '"]');
// setting the selected menu item'class as active
$selected_item.addClass('active');
// THIS IS WHERE I THINK THE ERROR IS
// if none of the h2.subnav's has a url that matches
// the current location then assume that it's the top one that's active:
if ($all_items("href") !== path) $top_item.addClass('active');
});
我正在使用jQuery应用活动类,只要在anchors href和位置url之间存在匹配项,它就可以正常工作.如果url与任何锚都不匹配,我希望将活动类应用于 $ top_item
.我的jQuery的那部分不起作用.
I am applying the active-class with jQuery, it works fine as long as there is a match between an anchors href and the location url. If the url don't match any of the anchors I want the active-class to be applied to the $top_item
. That part of my jQuery doesn't work.
我看不到错误是什么,但是我还是有点像Javascript/jQuery n00b.任何帮助将不胜感激.
I can't see what the error is, but then again I'm somewhat of a Javascript/jQuery n00b. Any help would be appreciated.
推荐答案
这应该是您想要的:标记匹配的链接,如果失败,则标记为默认链接.
function markActiveLink() {
//Look through all the links in the sidebar
$("div#sidebar a").filter(function() {
//Take the current URL and split it into chunks at each slash
var currentURL = window.location.toString().split("/");
//return true if the bit after the last slash is the current page name
return $(this).attr("href") == currentURL[currentURL.length-1];
//when the filter function is done, you're left with the links that match.
}).addClass("active");
//Afterwards, look back through the links. If none of them were marked,
//mark your default one.
if($("div#sidebar a").hasClass("active") == false) {
$("div#sidebar h2:nth-child(2) a").addClass("active");
}
}
markActiveLink();
此外,我在jQuery Docs网站上的>上找到了一个官方教程-滚动到底部以查看jQuery代码.尽管它不是根据您的情况量身定做的,但它比我的要紧.
Also, I found an official tutorial on this on the jQuery Docs site - scroll to the bottom to see the jQuery code. It's tighter than mine, although it's not tailored to your situation.
这篇关于使用jQuery进行主动导航-无法将默认类应用于锚点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!