A partir de este método, podría implementar un desplazamiento que cambie el color cuando pase el mouse sobre alguna pestaña. Pero necesito cambiar el color de forma permanente cuando alguien hizo clic en la pestaña.
Ejemplo: si alguien hizo clic en la página 1, la pestaña debería cambiar de color, si alguien hizo clic en la página 2, la pestaña debería cambiar de color y la pestaña de la página 1 debería cambiar al color que tenía.
¿Alguien puede sugerir un método para implementar esto?
.wrapper { display: flex; position: relative; display: flex; width: 100%; height: 100% } .wrapper .sidebar { width: 220px; height: 100%; background: #4b4276; padding: 30px 0px; position: fixed; font-size: 15px; display: block; height: 100%; flex-shrink: 0; } .wrapper .sidebar h2 { color: #fff; text-transform: uppercase; text-align: center; margin-bottom: 30px; font-family: Helvetica; } .wrapper .sidebar ul li { padding: 15px; border-bottom: 1px solid #bdb8d7; border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.05); } .wrapper .sidebar ul li a { color: #bdb8d7; display: block; } .wrapper .sidebar ul li a .fas { width: 25px; } .wrapper .sidebar ul li:hover { background-color: #594f8d; } .wrapper .sidebar ul li:hover a { color: #fff; } .wrapper .main_content { margin-left: 220px; width: calc(100% - 200px); display: block; } <div class="wrapper"> <div class="sidebar"> <h2 style="font-family: Verdana;"> Dashboard</h2> <ul> <li><a href="#"><i class="fa fa-home"></i> Home</a></li> <li><a href="page1.php"><i class="fa fa-paper-plane"></i> Page 1</a></li> <li><a href="page2.php"><i class="fa fa-mobile"></i> Page 2</a></li> <li><a href="page3.php"><i class="fa fa-phone"></i>Page 3</a></li> <li><a href="page4.php"><i class="fa fa-plug"></i> Page 4</a></li> <li><a href="page5.php"><i class="fa fa-user"></i> Page 5</a></li>> </ul> </div> </div>¡Gracias de antemano!
Esto debe hacerse en el backend, pero en caso de que no desee modificar su marcado o simplemente desee un enfoque perezoso, puede intentar algo como esto.
window.location.pathnameli a con el valor href del punto 1 anterioractive al elemento coincidente let currentPage = window.location.pathname === '/' ? '/' : window.location.pathname.substring(1) let pageLink = document.querySelector('.sidebar>ul>li>a[href="'+currentPage+'"]'); if(pageLink) pageLink.parentElement.classList.add('active') .wrapper{ display: flex; position: relative; display: flex; width: 100%; height: 100% } .wrapper .sidebar{ width: 220px; height: 100%; background: #4b4276; padding: 30px 0px; position: fixed; font-size: 15px; display: block; height: 100%; flex-shrink: 0; } .wrapper .sidebar h2{ color: #fff; text-transform: uppercase; text-align: center; margin-bottom: 30px; font-family: Helvetica; } .wrapper .sidebar ul li{ padding: 15px; border-bottom: 1px solid #bdb8d7; border-bottom: 1px solid rgba(0,0,0,0.05); border-top: 1px solid rgba(255,255,255,0.05); } .wrapper .sidebar ul li a{ color: #bdb8d7; display: block; } .wrapper .sidebar ul li a .fas{ width: 25px; } .wrapper .sidebar ul li:hover{ background-color: #594f8d; } .wrapper .sidebar ul li:hover a{ color: #fff; } .wrapper .main_content{ margin-left: 220px; width: calc(100% - 200px); display: block ; } .wrapper .sidebar ul li.active { background-color: red; } <div class="wrapper"> <div class="sidebar"> <h2 style="font-family: Verdana;"> Dashboard</h2> <ul> <li><a href="#"><i class="fa fa-home"></i> Home</a></li> <li><a href="page1.php"><i class="fa fa-paper-plane"></i> Page 1</a></li> <li><a href="page2.php"><i class="fa fa-mobile"></i> Page 2</a></li> <li><a href="page3.php"><i class="fa fa-phone"></i>Page 3</a></li> <li><a href="page4.php"><i class="fa fa-plug"></i> Page 4</a></li> <li><a href="page5.php"><i class="fa fa-user"></i> Page 5</a></li> </ul> </div> </div>