Меню с несколькими ссылочными ссылками активный класс привязки - PullRequest
Новая
       42

Меню с несколькими ссылочными ссылками активный класс привязки

0 голосов
/ 18 марта 2019

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

<ul>
    <li><a href="#home" class="active" onclick="closeNav();">Home</a></li>
    <li><a href="#about" onclick="closeNav();">About</a></li>
    <li><a href="#portfolio" onclick="closeNav();">Portfolio</a></li>
    <li><a href="#news" onclick="closeNav();">News</a></li>
</ul>

Я нашел некоторый код, который позволит мне добавить активный класс к текущей ссылке привязки, но код не выделяет все экземпляры.

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

Используемый мной jQuery выглядит так: 

$("#top-nav li, #foot-nav li").click(function(e) {
    e.preventDefault();
    $(this).closest('#top-nav,     
    #foot-nav').find('li').removeClass("active");
    $(this).closest("li").addClass("active");
});

Есть ли способ изменить функцию, чтобы при нажатии #about или любой другой привязки ссылка "О программе" в обоих меню получала активный класс?

Спасибо,
Джош

1 Ответ

1 голос
/ 19 марта 2019

В общем случае «это» - это только один элемент, и это элемент, который вы только что щелкнули.Да, вы добавили прослушиватель событий к обоим элементам навигации, но вы всегда нажимаете только один раз.Чтобы найти все одинаковые элементы, вам нужно найти в обратном вызове все элементы с одинаковым якорем в разных навигационных элементах, а затем добавить / удалить «активный» класс.Вероятно, вы можете улучшить этот код, а мб уменьшить его.

См. Рабочий код здесь https://codepen.io/anon/pen/YgOyWj. 

html:
<ul id="top-nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about" >About</a></li>
    <li><a href="#portfolio" >Portfolio</a></li>
    <li><a href="#news" >News</a></li>
</ul>

  <ul id="foot-nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about" >About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#news">News</a></li>
</ul>


css: 
.active a { color: green; }


js:
const navsStr = '#foot-nav li, #top-nav li';

$(navsStr).on('click', function (e) {
  e.preventDefault();
  const href = $(this).find('a').attr('href');
  let items = $(navsStr).find('a[href$="' + href + '"]');
  $(items).parent().addClass('active').siblings().removeClass('active');  
});
...