• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1450
  • Last Modified:

Add class to active link that has children

I am using the superfish menu system on a site for a navigation system the html markup is as follows

<ul class="sf-menu sf-vertical">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About Us</a>
            <ul>
                  <li><a href="#">Some Staff Member</a>
                  <li><a href="#">Some Staff Member2</a>
            </ul>
      </li>
      <li><a href="#">Our Principles</a></li>
      <li><a href="#">Contact</a></li>
</ul>

I am using jquery to get the current page URL and match it to the link in href and then add the class="active" so i can highlight the current page, this all works fine using

$(".lnav li a").each(function() {
            if(this.href == window.location.href.split("#")[0]) {
                  $(this).addClass("active");
            }
      });

by also adding the class="current" to a parent <li> that has a child <ul> ii can keep the child menu open in that section so was wondering if its possible to do his using the same method. I guess i need to add the class="current" to the top parent <li> if any of the child a hrefs match the URL, so in the example above if we were in the page linked from 'Some Staff Member2' i would need <li class="current"><a href="about.html">About Us</a>



0
wildeeep
Asked:
wildeeep
  • 3
  • 3
1 Solution
 
Albert Van HalenAnalyst developerCommented:
You can use this jquery selector
// Get the topmost li from the current class
$(".current").parents("li:last")

Open in new window

0
 
wildeeepAuthor Commented:
Thanks, not quite what i needed though. I need to set the topmost li with the class of current so then the supefish script will keep the menu open.
0
 
Albert Van HalenAnalyst developerCommented:
Oops, it should be
$(".active").parents("li:last").addClass("current")

Open in new window

0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
wildeeepAuthor Commented:
Thanks this does work but seems to also set the child <li> with the current class too, i only need it for the top parent <li>

possible?
0
 
Albert Van HalenAnalyst developerCommented:
It doesn't add the class to the child li, the rules for that class are inherited from the parent.
If you don't want inheritance, you better apply the class to the a element inside the li.

Try this
$("a", $(".active").parents("li:last")).addClass("current")

Open in new window

0
 
wildeeepAuthor Commented:
Works perfectly, thanks for a great solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now