Soy un nuevo aprendiz en PHP. No puedo resolver ningún problema en mi código.
En sidebar.php
<nav class="side-bar"> <ul> <li> <a href="index.php" class="category active"> <i class="fi fi-bs-home"></i> <span>Home</span> </a> </li> <li> <a href="#" class="category"> <i class="fi fi-bs-apps"></i> <span>Room</span> </a> </li> <li> <a href="contact.php" class="category"> <i class="fi fi-br-comment-alt"></i> <span>Contact</span> </a> </li> </ul> </nav>En script.js
const category = document.querySelectorAll('.category'); category.forEach(cate =>{ cate.addEventListener('click',()=>{ removeClass(); cate.classList.add('active'); }) }) function removeClass(){ category.forEach(cate=>{ cate.classList.remove('active'); }) }En index.php
#code <?php include ("sidebar.php"); ?> #codepero la clase activa no se resalta cuando enlazo a una nueva página, pero funciona si uso href="#" en la etiqueta. ¿Como puedó resolver esté problema?
Debe definir los colores que desea usar cuando un elemento está activo y cuando se visita un elemento, pero no está activo. Puedes elegir los colores que prefieras en lugar de los que yo he elegido.
const category = document.querySelectorAll('.category'); category.forEach(cate =>{ cate.addEventListener('click',()=>{ removeClass(); cate.classList.add('active'); }) }) function removeClass(){ category.forEach(cate=>{ cate.classList.remove('active'); }) } a.active { color: #7F7FEE; } a, a:not(.active):visited { color: #0000FF; } <nav class="side-bar"> <ul> <li> <a href="index.php" class="category active"> <i class="fi fi-bs-home"></i> <span>Home</span> </a> </li> <li> <a href="#" class="category"> <i class="fi fi-bs-apps"></i> <span>Room</span> </a> </li> <li> <a href="contact.php" class="category"> <i class="fi fi-br-comment-alt"></i> <span>Contact</span> </a> </li> </ul> </nav>