使用 jQuery 进行主动导航 - 无法将默认类应用于锚点 [英] Active navigation with jQuery - can't apply a default class to anchor
问题描述
我目前正在尝试制作一个 navigation-menu
,其中 active-class
应用于 href
属性与当前 URL,因此我可以为该锚点设置样式,使其从菜单的其余部分中脱颖而出.
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 应用活动类,只要锚点 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屋!