Найти, если идентификатор ссылки равен идентификатору родительского контейнера

Question

Привет, ребята, нуждающиеся в небольшой помощи.

Я создаю персональный сайт на одну страницу.

В каждом разделе есть меню для перехода в другой раздел, однако я хочу добавить класс в меню для текущего раздела:

т.е. если у вас есть ссылка about, у нее будет класс 'current'.

Вот так это выглядит.

<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>

Новичок в jquery, поэтому я изо всех сил пытаюсь выяснить, как это сделать.

Любая помощь будет принята с благодарностью.

Спасибо

Answer 1

Во-первых, вы должны дать секции соответствующий класс или префиксный идентификатор (любой, кроме того же самого идентификатора), например:

<section id="current-about">

идентификаторы должны быть уникальными, поэтому они не должны совпадать напрямую,После выполнения вышеизложенного вы можете сделать следующее:

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

Для этого нужно получить идентификатор из <section>, содержащий <nav>, удалить префикс и найти элемент с этим идентификатором.и добавляет класс. Вы можете посмотреть / поиграть с демонстрацией кода здесь .