2 пункта в одном меню, указывающем на 1 страницу

У меня есть меню, содержащее 2 элемента, которые указывают на 1 страницу, мой вопрос в том, как я выделяю элемент верхнего уровня в соответствии с тем, где я его нажимаю.

<nav> <ul class="mainNavi" id="menu-main"> <li><a href="#">Home</a></li> <li><a href="#">Funding Guidelines</a> <ul class="sub-menu"> <li><a href="#">Learning Institutions</a> <ul class="sub-menu"> <li><a href="#">Who Is Eligible</a></li> <li><a href="#">What We Fund</a></li> </ul> </li> <li><a href="#">FAQs</a></li> </ul> </li> <li><a href="#">Projects</a></li> <li><a href="#">Donations</a> <ul class="sub-menu"> <li><a href="#">Make Donation</a></li> <li><a href="#">Request for Tax Exempt Receipts</a></li> <li><a href="#">FAQs</a></li> </ul> </li> </ul> </nav> 

Ссылаясь на выше, у меня есть две ссылки на часто задаваемые вопросы, одна в Руководстве по финансированию и еще одна в разделе «Пожертвование», которые оба ссылаются на одну страницу. Моя проблема заключается в том, как выделить меню верхнего уровня, когда я нажимаю ссылку в соответствующем подменю, не выделяя другой. Теперь у меня есть то, что, когда я нажимаю на меню, он подсвечивается как меню верхнего уровня.

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

Сегодня у меня была эта проблема, вот как я ее решил.

Вы должны выделить приоритет 1 из 2 ссылок.

Нужно стать реальной ссылкой на страницу, которая будет выделена вместе с ее меню верхнего уровня. Другая ссылка станет короткой, и когда вы попадете на страницу часто задаваемых вопросов, будет выделена реальная ссылка, а не ярлык.

Чтобы создать ярлык, создайте внешнюю ссылку в своем меню и используйте URL-адрес , ассоциированный с корнем , и добавьте ? в конце. Например, /faq?

Это предотвратит применение .current-menu-item и .current-menu-ancestor в сокращенной версии.