Есть несколько ссылок в сайдбаре. Как с помощью JS сделать выделение цветом ссылки, на которую нажал?

Question

[zibinskyY]

<div class="aside__item aside__item-pages">
               <a href="/pages/theme5/theme5.1.html" class="aside__link aside__link-pages">
                  <div class="aside__link-title">Занятие 1</div>
                  <div class="aside__link-descr">Подробное описание темы занятия</div>
               </a>
            </div>
            <div class="aside__item aside__item-pages">
               <a href="/pages/theme5/theme5.2.html" class="aside__link aside__link-pages">
                  <div class="aside__link-title">Занятие 2</div>
                  <div class="aside__link-descr">Подробное описание темы занятия</div>
               </a>
            </div>
            <div class="aside__item aside__item-pages">
               <a href="/pages/theme5/theme5.3.html" class="aside__link aside__link-pages">
                  <div class="aside__link-title">Занятие 3</div>
                  <div class="aside__link-descr">Подробное описание темы занятия</div>
               </a>
            </div>
            <div class="aside__item aside__item-pages">
               <a href="/pages/theme5/theme5.4.html" class="aside__link aside__link-pages">
                  <div class="aside__link-title">Занятие 4</div>
                  <div class="aside__link-descr">Подробное описание темы занятия</div>
               </a>
            </div>

Comments

[archelon]

можно и с css сделать
a:focus {color:green;}

[zibinskyY]

archelon, сделал, но вот что странно: зеленый мелькает только на мгновение, когда нажимаешь на элемент. Не знаете, почему так? Я хз(((

[archelon]

zibinskyY,
пока фокус сохраняется, назначенное свойство должно оставаться.
какие-то скрипты на ссылках висят?
может там preventdefault

[zibinskyY]

archelon, файл js вообще пустой

[ThunderCat]

archelon, какой фокус? Страничка перегружается, и все ваши фокусы улетают...

[archelon]

ThunderCat, а, так ему текущую ссылку надо выделить. ясно

Answer 1

[ThunderCat]

Вообще такое делается с серверной части, когда сайт динамический. В вашем случае можно сделать так:

1) Выбрать все ссылки из сайдбара
2) пройтись циклом по выбранным элементам, сравнить входит ли в текущий урл хреф из ссылки
3) Если входит - применить к ней стиль с соответствующими эффектами

Comments

[zibinskyY]

Извините, вы не могли бы показать пример кода для данного случая?

[Сергей delphinpro]

zibinskyY, в интернете сотни примеров https://yandex.ru/search/?text=активный+пункт+меню...