Somehow my Code has trouble with adding active classes. If the first Menu is selected than it adds to <nav>
, to itself <li>
and to the next <li>
the active class.
<nav id="cssmenu" class="sidebox_content active">
<ul class="navmenu">
<li class="active">
<a href="Neu-im-Sortiment">Neue Produkte</a>
</li>
<li class="has-sub top-cat active"></li>
</ul>
</nav>
This is the Javascript that I am using for it
$(document).ready(function () {
var url = window.location;
// Will only work if string in href matches with location
$('ul.navmenu a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.navmenu a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
If the second List is clicked than everything is working like a charm. Are the .partent() wrong ?
I'm assuming the following:
active
to the li
and nav
ancestor elements that contain the a
; href
of Neu-im-Sortiment
somewhere in the path (eg, " http://example.com/products/Neu-im-Sortiment ") I suspect the main problem is that window.location
is an object, not a string. For this post's url, it looks like this:
window.location = {
"ancestorOrigins": {
"length": 0
},
"origin": "http://stackoverflow.com",
"hash": "",
"search": "",
"pathname": "/questions/23985401/jquery-navigation-add-active-class",
"port": "",
"hostname": "stackoverflow.com",
"host": "stackoverflow.com",
"protocol": "http:",
"href": "http://stackoverflow.com/questions/23985401/jquery-navigation-add-active-class"
};
You could use window.location.href
, but the full URL is not likely to be useful for your purposes. Try window.location.pathname
instead.
$(document).ready(function () {
"use strict";
var path = window.location.pathname, // skip the domain and truncate any hashtag nonsense and/or url parameters
link = $('ul.navmenu a').filter(function (i) {
var startOfPath = path.indexOf(this.href) === 1, // pathname starts with a slash
anywhereInPath = path.indexOf(this.href) > -1,
endOfPath = path.indexOf(this.href) === path.length - this.href.length;
return startOfPath || anywhereInPath || endOfPath; // anywhereInPath is most likely to be true
}),
li = link.parents('li'), // to get the LI element, or you could do link.parent(), since the LI is the immediate ancestor
nav = link.parents('nav'); // to get the NAV element, or you could do li.parents('nav'), or you could do li.parent().parent() (etc.)
li.addClass('active'); // add class to LI
nav.addClass('active'); // add class to NAV
// or you could do both with the same call:
// $(li, nav).addClass('active');
});
Compacted syntax (chaining it all):
$(document).ready(function () {
"use strict";
var path = window.location.pathname;
$('ul.navmenu a').filter(function (i) { // this selects all A elements that have an ancestor UL with class "navmenu"
var existsInPath = yourLogic(); // and returns only those that match this criteria
return existsInPath;
}).parents('li').addClass('active').parents('nav').addClass('active');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.