Question

У меня есть меню HTML, как показано ниже ...

<ul class="menu" id="menu"> 
 
    <ul class='section' id='section_1'> 
 
    <li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span> 
 
     <ul> 
 
     <li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a> 
 
     </li> 
 
     <li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a> 
 
     </li> 
 
     <li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a> 
 
     </li> 
 
     <li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> &rarr; Betting history</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_2'> 
 
    <li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span> 
 
     <ul> 
 
     <li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_5'> 
 
    <li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span> 
 
     <ul> 
 
     <li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a> 
 
     </li> 
 
     <li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a> 
 
     </li> 
 
     <li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_4'> 
 
    <div class='bot'> 
 
     <p><a href='https://www.twitter.com/themathsproject' target="_blank">twitter</a> 
 
     <br /> 
 
     <a href='https://www.facebook.com/themathsproject' target="_blank">facebook</a> 
 
     </p> 
 
    </div> 
 
    </ul> 
 
</ul>

Он состоит из нескольких «секций», который связывает дом (имеющих отношение к разделу). Каждая секция имеет основное название (например, против коэффициентов) и несколько подсекций (которые хранятся в другой ul), такие как «производные функции». Подразделы устанавливаются в display: none по умолчанию (у меня есть jQuery, который открывает разделы, если пользователь хочет).

Проблема:

После того, как пользователь нажимает на ссылку подраздела (например, www.themathsproject.co.uk/against-the-odds/deriving-functions), я хочу подразделу в котором размещена ссылка (в случае id = section_1), которая будет открыта при перезагрузке страницы, чтобы пользователь мог легко перейти к другим ссылкам в этом разделе. Остальные подразделы останутся закрытыми.

Я хотел бы написать функцию jQuery, которая сравнивает текущий URL-адрес страницы с ссылками в каждом разделе и, если он найдет совпадение, назначит класс «active_section» соответствующему разделу. К сожалению, я не знаю, как это сделать.

Я застрял на этом весь день и сделал небольшой шаг вперед.

я бы очень признателен за любую помощь,

Джек

Answer 1

Ваш пост немного хаотично, поэтому я попытаюсь дать вам общие советы.

Чтобы получить последний элемент вашего URL использовать

var name = window.href.substr(this.href.lastIndexOf('/') + 1) 

Теперь вы можете получить все подразделы и перебирать их (например, с помощью JQuery):

$('.sub-section').each(function() { 
    if ($(this).attr('id') === name) { 
     $(this).addClass('active'); 
    } 
}); 

Если идентификаторы отличаются имена в URL-адресе, вы можете создать словарь для сопоставления своих эквивалентов:

var sectionMap = { "section-name-1": "sectionID1" }; 

И после вас введите url, используя первую строку кода, которую я предоставил, вы можете сделать:

name = sectionMap[name];