Find if id of a link equals id of parent container

Question

Hi guys needing a bit of help.

I am creating a one page personal site.

Each section has a menu in it to jump to another section, however i want to have a class added to menu for the current section:

i.e. if you are in about the about link would have a class 'current'.

This is how it looks.

<section id="about">
<nav>
    <li><a href="#" id ="about">About</a></li>
    <li><a href="#" id ="contact">About</a></li>
    <li><a href="#" id ="blog">About</a></li>
</nav>

New to jquery so i am struggling to find out how to do this.

Any help will be greatly appreciated.

Thanks

Answer 1

First, you should give the section a matching class, or a prefixed ID (anything but the same ID), like this:

<section id="current-about">

IDs have to be unique, so they should not match directly. After doing the above, then you can do this:

$(function() {
  var id = $('section:has(nav)').attr('id').replace('current-','');
  $('#' + id).addClass('current');
});

What this does is gets the ID from the <section> containing a <nav>, strips off the prefix, then finds the element with that ID and adds the class. You can see/play with a demo of the code here.