якорь с активным меню с другой страницы - PullRequest
Новая
       57

якорь с активным меню с другой страницы

0 голосов
/ 04 августа 2020

Мне нужна помощь: D. у меня есть три разные страницы с одним и тем же меню. на первой странице ссылки внутри меню являются привязками к различным компонентам на странице. Теперь я хочу добиться, чтобы для второй и третьей страницы ссылки в меню также работали как якорь, но для компонентов на первой странице. Я протестировал это, и он работает, если я поставлю после URL-адреса привязку для соответствующего компонента с первой страницы.

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

как я могу это сделать?

вот у меня есть пример 

const NAV_LI = [].slice.call(document.querySelectorAll('.submenu > li'));
  for (var i = 0; i < NAV_LI.length; i++) {
    NAV_LI[i].addEventListener('click', function () {
      checkLi(this);
    });
  }
  function checkLi(current) {
    NAV_LI.forEach((el) => el.classList.remove('active'));
    current.classList.add('active');
  }
.submenu {
  display:flex;
  align-items:center;
  list-style:none;
  justify-content: space-around;
}

div {
  height: 50px;
  margin: 50px 0;
}

li.active {
  background-color: green;
}
<!--page one -->
<ul class="submenu">
  <li><a href="#component1">Comp1</a></li>
  <li class="active"><a href="#component2">Comp2</a></li>
  <li><a href="#component3">Comp3</a></li>
</ul>

<div id="component1">
  component 1
</div>
<div id="component2">
  component 2
</div>
<div id="component3">
  component 3
</div>


<!-- page 2 -->
<ul class="submenu">
  <li><a href="https://page-one/#component1">Comp1</a></li>
  <li class="active"><a href="https://page-one/#component2">Comp2</a></li>
  <li><a href="https://page-one/#component3>Comp3">Comp3</a></li>
</ul>


<!--page 3 -->
<ul class="submenu">
  <li><a href="https://page-one/#component1">Comp1</a></li>
  <li class="active"><a href="https://page-one/#component2">Comp2</a></li>
  <li><a href="https://page-one/#component3>Comp3">Comp3</a></li>
</ul>

большое спасибо!

...