Боковая панель навигации активного класса с якорями - PullRequest
Новая
       81

Боковая панель навигации активного класса с якорями

0 голосов
/ 18 июня 2020

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

<script>
     <![CDATA[
       document.querySelectorAll("#menu-hermeneutics li > a").forEach(a => {
          a.addEventListener("click", () => {
              a.addClass('active'); 
          });
       });]]>
</script>

<ul id="menu-hermeneutics">
    <li><a href="#general-overview">General Overview</a></li>
    <li><a href="#context-overview">...</a></li>
    <li><a href="#result-overview">...</a></li>
    <li><a href="#clanA">...</a></li>
    <li><a href="#aff-clanA">...</a></li>
    <li><a href="#clanB">...</a></li>
    <li><a href="#aff-clanB">...</a></li>
    <li><a href="#DR">...</a></li>
    <li><a href="#clanUNK">...</a></li>                
</ul>

И CSS: 

#menu-hermeneutics > .active {background-color: grey; color: white; font-weight: 700; margin-right: 100px; width: 200px; }

Заранее спасибо за вашу помощь.

Ответы [ 2 ]

1 голос
/ 18 июня 2020

Прежде всего, ваш код в document.querySelectorAll("#menu-hermeneutics li > a") означает, что он будет запрашивать все теги a и добавлять класс active, если щелкнуть по нему, но ваш css ниже, это другое. #menu-hermeneutics > .active означает, что он выберет дочерние элементы #menu-hermeneutics (здесь li, а не a) с классом active, потому что вы используете >. Если вы хотите css только для всех детей a, вы можете сделать это #menu-hermeneutics a.active Подробнее см. здесь . Надеюсь, это поможет

0 голосов
/ 18 июня 2020

Благодаря предложениям @ThienHuynh и коллеги, это правильный код: 

var links = document.querySelectorAll("#menu-hermeneutics li a");
  for (const link of links) {
    link.addEventListener("click", (e) => {
    var target = e.target;

    links.forEach(function(currentLink) {
        currentLink.classList.remove('active');
    });

      // if target already had .active. remove it. Otherwise, add it
      target.classList.toggle('active');
    })
    }

Примечание: см. Мой комментарий ниже относительно > vs &gt - это была основная проблема чтобы избежать ошибки.

...