Почему при подсвечивании кнопки активной страницы с помощью javascript у меня подсвечивается ещё и первая кнопка вместе с активной?

Question

[DmSS1997]

<div class="d-flex justify-content-center" id="buttons">
        <div ><a href="/" class="nav-link">Link1</a></div>
        <div ><a href="{% url 'link2' %}" class="nav-link">Link2</a></div>
        <div ><a href="{% url 'link3' %}" class="nav-link" >Link3</a></div>
</div>

document.querySelectorAll('#buttons div a').forEach(function(el) {

    if ( window.location.pathname.indexOf(el.getAttribute('href')) > -1) {
        el.classList.add('active');
    }
});

Comments

[Сергей Сергей]

document.querySelector( `#buttons .nav-link[href="${window.location.pathname}"]` )?.classList.add('active');

Answer 1

[Володимир Паламар]

В каждой ссылку встречается "/" как и в первой ссылке по этому она и подсвечивается
Переделайте немного алгоритм

document.querySelectorAll('#buttons div a').forEach(function(el) {

    if ( window.location.pathname == el.href) {
        el.classList.add('active');
    }
});

Comments

[DmSS1997]

Ой, это когда я код редактировал для вопроса, забыл убрать кавычки, там id у diva стоял

[Володимир Паламар]

DmSS1997, попробуйте тогда пройтись по классу

document.querySelectorAll('#buttons .nav-link').forEach()

[Володимир Паламар]

Володимир Паламар, я понял в чем подвох в каждой ссылку встречается "/" как первая ссылка по этому она и подсвечивается

[DmSS1997]

Володимир Паламар, Он видит их, и с a и с классом .nav-link, проблема не в этом, он почему-то выделяет две кнопки. Первую и активную

[Володимир Паламар]

DmSS1997, я понял в чем подвох в каждой ссылку встречается "/" как первая ссылка по этому она и подсвечивается. Нужно переделать алгоритм сделайте на полное соответствие

[DmSS1997]

Не совсем понимаю, как это можно сделать(

[Володимир Паламар]

DmSS1997, window.location.pathname == el.href
Что то в таком духе
Поэкспертируйте или поищите в интернете
https://stackoverflow.com/questions/20060467/add-a...
Не обязательно смотреть только на главный ответ под ним есть вариант который вам подойдёт