I have a question. I use jquery superfish menu with the following structure
<div id="menu" class="ge-navigation-item">
<!-- navigation -->
<ul id="test" class="sf-menu sf-vertical sf-js-enabled sf-shadow">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="index.html">Index</a></li>
<li><a href="#">Page</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="proef.html">menu item</a></li>
<li><a href="index.html">index</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="page-fullwidth.php">Page - Full Width</a></li>
</ul>
</li>
<li><a href="showcase.php">Showcase</a></li>
</ul>
<!-- /navigation -->
</div>
what I want is that clicking on a link the menu structure will be visible
So clicking on index.html will set a link on all links with href index.html But clicking on proef.html will set an active class on href proef.html - Page - About
So far I have tried this but with bad results
var path = window.location.toString().split("/")
path = path[path.length - 1]
//alert (path);
if (path)
$("#test a[href='" + path + "']").addClass("actief");
$("#test ul li:has(a) a[href='" + path +
"']").parent().parent().parent().addClass("actief");
Welcome to stackoverflow. Try this:
var path = window.location.pathname.split('/');
path = path[path.length-1];
if (path !== undefined) {
$("#menu3").find("a[href='" + path + "']").addClass("actief");
}
That should appply the class to any link that matches the last item of the current url. If you were looking for a different behavior, please elaborate!
UPDATE
Actually, it looks like you need this:
var path = window.location.pathname.split('/');
path = path[path.length-1];
if (path !== undefined) {
$("#menu3")
.find("a[href$='" + path + "']") // gets all links that match the href
.parents('li') // gets all list items that are ancestors of the link
.children('a') // walks down one level from all selected li's
.addClass('actief');
}
That will put the class on every a
element up the chain.