Я пытаюсь установить имя класса на теге <a>. проблема в том, что когда я нажимаю на ссылку, страница обновляется и класс удаляется - PullRequest
Новая
       14

Я пытаюсь установить имя класса на теге <a>. проблема в том, что когда я нажимаю на ссылку, страница обновляется и класс удаляется

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

У меня есть следующий HTML фрагмент кода 

<li>
    <a href="javascript:;"><i class="sidebar-item-icon ti-hummer"></i>
        <span class="nav-label">Product Management</span><i class="fa fa-angle-left arrow"></i></a>
    <ul class="nav-2-level collapse">
        <li>
            <a href="/admin/addProducts" id="addProductMenu" onclick="addActiveClass(this)" >Add Product</a>
        </li>
        <li>
            <a href="/admin/allProducts" id="allProductsMenu" onclick="addActiveClass(this)">All Products</a>
        </li>
        <li>
            <a href="/admin/recommendedProducts" id="recommendedMenu" onclick="addActiveClass(this)">Recommended</a>
        </li>
        <li>
            <a href="/admin/featuredProducts" id="featuredMenu" onclick="addActiveClass(this)">Featured</a>
        </li>
        <li>
            <a href="/admin/bestSellingProducts" id="bestSellingMenu" onclick="addActiveClass(this)">Best Selling</a>
        </li>
        <li>
            <a href="/admin/popularIndustriesProducts" id="popularIndustriesMenu" onclick="addActiveClass(this)">Under popular industries</a>
        </li>
    </ul>
</li>

, что мне нужно, когда я нажимаю на любую ссылку <a>, вызывается функция javascript addActiveClass(this) и добавляется класс class='active' для тега <a>, по которому щелкнули.

Код javascript 

function addActiveClass(element) {
    var el = document.getElementById(element.id);
    el.classList.add("active");
    el.parentElement.classList.add("active");
}

Моя проблема заключается в том, что при нажатии на ссылку функция javascript выполняется и класс применяется. Затем после этого страница обновляется, и, поскольку класс был добавлен динамически, после повторной загрузки страницы ранее добавленный класс class='active' удаляется.

Как настроить класс после установки refre sh?

Эти списки находятся на странице состояния c, которая загружает дочерние страницы, которые изменяются.

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

Спасибо heleg за ваше предложение, что оно действительно работает,

Я сделал следующее 

$(document).ready(function() {

var path = window.location.pathname.split("/").pop();
var parent = null;
var activeElement = null;
var target = null;

if (path == "") {
    path = "home";
}

if (path == "home") {
    target = $('nav div ul li a[href="/admin/' + path + '"]');
} else {
    target = $('nav div ul li ul li a[href="/admin/' + path + '"]');
}

target.addClass("active");

if (path != "home") {
    activeElement = document.getElementsByClassName("active");

    parent = activeElement[0].parentElement;

    parent = parent.parentElement;

    parent.classList.add("in");

    parent = parent.parentElement;

    parent.classList.add("active");
}
});
0 голосов
/ 14 апреля 2020

Чтобы onclick работал с тегом привязки, необходимо остановить действие тега по умолчанию при нажатии, поскольку по умолчанию теги привязки переходят по URL-адресу в ссылке. Вместо этого вы можете написать, 

function addActiveClass(e) {
    e.preventDefault();
    let el = document.getElementById(e.target.id);
    el.classList.add("active");
    el.parentElement.classList.add("active");
}
...