Добавьте класс и сохраните его, когда и после перезагрузки страницы - PullRequest
Новая
       8

Добавьте класс и сохраните его, когда и после перезагрузки страницы

0 голосов
/ 08 апреля 2020

Я пытаюсь изменить цвет фона ссылки Navbar (когда она активна), когда пользователь нажимает на нее. Я получаю последний элемент в URL, его индекс. html в файле: /// home / mery / Alterway / ign-portail / custom / themes / portail / stati c -builder / __ public / styleguide / index. html и я сравниваю его с количеством нажатых. когда я нажимаю на, страница обновляется, и я ничего не вижу! Это мой код: 

//Active navbar link
var get_url = function (){
    $('.nav-item .nav-link').click(function (e) {
        var current = location.pathname;
        console.log("autre res : ",
        $('.nav-item .nav-link').attr('href').indexOf(current));
        // // $('.nav-item .nav-link').each(function(){
            var $this = $(this);
            if($this.attr('href') == window.location.href.substr(window.location.href.lastIndexOf('/') + 1)){
            // if($this.attr('href') !== -1){
                console.log("this element", $this);
                $this.addClass('active');
            }
        // })
    });
}

Мой HTML код: 

{% if navItems %}
<ul class="navbar-nav{% if navLeft %} navbar-nav--left{% endif %}{% if navPortails %} navbar-nav--portails{% endif %}">
    {% for item in navItems %}
    <li class="nav-item{% if item.isActive %} is-active{% endif %}">
        {% if item.hasChild %}
            <button class="nav-link" type="button" data-toggle="collapse" data-target="#nav-collapse-{{ loop.index0 }}" aria-controls="nav-collapse-{{ loop.index0 }}" aria-expanded="false">{{ item.text }}{% if item.isActive %} <span class="sr-only">(page courante)</span>{% endif %}</button>

            <div class="collapse nav-collapse" id="nav-collapse-{{ loop.index0 }}">
                <div class="nav-collapse-inner">
                    {% include "navbar-nav__submenu.twig" with { 'navItems': item.hasChild } %}
                </div>
            </div>
        {% else %}
            <a class="nav-link" href="{{ item.link }}"{% if item.target %} target="{{ item.target }}"{% endif %}>{{ item.text }}{% if item.isActive %} <span class="sr-only">(page courante)</span>{% endif %}</a>
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endif %}
...