Jquery - addClass('active') to Top Navigation if it matches current parent of active link in accordion.

0
votes

The problem is I have a navigation in two parts. Top Nav and Left Nav. I need to tell the top link to have a class of ".active" if the left navigation's sibling is the current url.

EX: If you're on a child link of about ie - "Bio" I need to tell the top nav link "About" link to have the class of .active.

Home | About | Contact

<-- Page Content Here -->

<ul id="leftnav">
      <li>Home</li>
      <li><a href="ul.com/">About</a>
            <ul>
                  <li>Bio</li>
                  <li>History</li>
                  <li>Location</li>
            </ul>
      </li>
      <li>Contact</li>
</ul>

I tried this:

$(document).ready(function() {
    currentPage = window.location.pathname;
    if( $('.sidebarNav li a[href$="' + currentPage + '"]').parent('#aboutParent')) {
        $('#aboutTopNav a').addClass('active');
    }
});
2
jquerynavigationaccordionaddclass
You should include your source html. But I think this should rather be done server side. - demux
I would love to do this server side however i'm working with a client who needs to have static html pages. - Ethan H

2 Answers

0
votes

Use the jQuery tree traversal to aid your needs: http://api.jquery.com/category/traversing/tree-traversal/

0
votes
$(document).ready(function() {
var href_array= window.location.pathname.split("/");
var part_num = 0;
while (part_num < href_array.length) {
    lastPart = href_array[part_num];
    part_num += 1;
}
//alert( lastPart);

$('#navigationArea a[href*="' + lastPart + '"]').parentsUntil('.sub').addClass('active');

});

In my example ".sub" is a class, but I think it also will work with your id.