У меня есть простая навигационная панель, подобная этой:
a {
display: inline-block;
padding: .45rem 1rem;
text-decoration: none;
color: #007bff;
}
a:hover,
a.active{
background-color: rgb(225, 239, 255);
}
<nav>
<a href="index.html" class="active"> Home </a>
<a href="post-new.html"> New Post </a>
<a href="contact.html"> Contact </a>
</nav>
Итак, когда я нажимаю на ссылки, например, если я нажимаю на контакт, страница будет перезагружена, и активный класс из дома будет потерян , Но это должно быть в Контакте (активный класс).
Есть несколько способов сделать это, например, LocalStorage / Cook ie. Когда мы нажимаем на ссылку, она берет имя страницы из URL с помощью window.location.href и устанавливает его в localStorage / cook ie после перезагрузки странице, мы можем прикрепить активный класс к точному элементу. Но если пользователь очистит localStorage, он будет удален или URL-адрес недействителен, я имею в виду, что они также могут использовать любую инфраструктуру, которая не будет предоставлять идеальный URL-адрес.
Другой способ - использовать базу данных. Но мне это не нравится. Итак, как я могу сделать это, На самом деле я делаю панель администратора, которая похожа на панель управления Metroni c по умолчанию. [Это общая функция, используемая на различных сайтах, таких как w3schools]