Семантический интерфейс - Следующий пример меню

Question

Я новичок в Semantic UI, и я хочу реализовать следующее меню, как показано на рисунке Semantic UI's documentation с правой стороны. Я хочу реализовать эту функцию в фиксированном верхнем меню - поэтому, когда достигнут идентификатор элемента заголовка, активный элемент в меню должен быть изменен. Я смотрел код docs.js, где это реализовано для сайта документации, но этот код довольно сложный, если вы впервые используете Semantic UI. У меня есть эти классы для моего меню: ui большое верхнее фиксированное скрытое меню

Есть ли уже встроенное следующее меню (возможно, нет, поскольку оно не упоминается в документах?) Или я добавляю его с помощью jQuery?

Answer 1

semantic-ui только дает вам стиль. Как только вы нажмете на элемент меню, вам нужно обновить активный статус элемента.

Это, как у нас это реализовано в коде -

const menuNav = $('.ui.menu.menu-component .item'); 
menuNav.on('click', function (item) { 
    menuNav.removeClass('active'); 
    $(this).addClass('active'); 
}); 

Другая вещь, чтобы помнить о том, что вам нужно проверить URL на странице загрузки, так что вы можете установить соответствующую метку элемента активным.