#javascript #html #jquery #css
#язык JavaScript #HTML #jquery #CSS
Вопрос:
Я хочу, чтобы на моем сайте было меню с активными пунктами. Следует добавить класс для активации элемента. Поскольку проект содержит зашифрованные URL-адреса, решения на основе URL-адресов невозможны. Текст соответствующего пункта меню отображается в соответствующем заголовке страницы.
Моя идея состояла в том, чтобы сравнить заголовок id="navtopheader" страницы с текстом в пункте меню. Если он равен, добавьте menuactive класс в соответствующий пункт меню.
Мой HTML выглядит в основном так:
lt;div id="navtopheader" class="navtopheader"gt;menu item 1lt;/divgt; ... lt;div class="nav_ebene_2"gt; lt;pgt;menu item 1lt;/pgt; lt;/divgt; lt;div class="nav_ebene_2"gt; lt;pgt;menu item 2lt;/pgt; lt;/divgt; ... Я могу сделать это на самом деле неэффективным способом:
var headertext = document.getElementById("navtopheader").innerText var menutext0 = document.getElementsByClassName("nav_ebene_2")[0].innerText var navlist = document.getElementsByClassName("nav_ebene_2"); if (headertext == menutext0) { navlist[0].classList.add("activemenu"); } var menuitem1 = document.getElementsByClassName("nav_ebene_2")[1].innerText if (headertext == menuitem1) { navlist[1].classList.add("activemenu"); } ... Но поскольку количество пунктов меню варьируется на разных сайтах, я получу сообщение об ошибке, если включу слишком много/слишком мало пунктов меню.
Есть ли подходящее решение? Я пытался весь день, но не решил проблему. Спасибо!
Ответ №1:
Повторите набор lt;pgt; s, которые являются дочерними элементами nav_ebene_2 . Когда будет найдено совпадение, добавьте класс в его родительский.
const headerText = document.querySelector('#navtopheader').textContent; for (const p of document.querySelectorAll('.nav_ebene_2 p')) { if (p.textContent === headerText) { p.parentElement.classList.add('activemenu'); } }