0
440
VistasCambiar qué etiqueta A se resalta según la página activa
Así que tengo un menú con diferentes artículos.
<div class="right-nav"> <a href="/metrics/website/index" class="active">Home</a> <a href="/metrics/website/pages/archives">Archives</a> </div> La class="active" resalta el elemento del menú, y me preguntaba cómo podía hacer que esta clase cambiara según la página en la que estaba. Entonces, si el usuario visitó Archives , entonces tiene class="active" .
La clase es solo un color simple.
.topnav a.active { /* When a-tags inside this class has been clicked - do highlight*/ color: var(--selected-nav-page); } 
Todo mi código html se ejecuta dentro de archivos php.
ACTUALIZAR
Podría haber encontrado algo que funcione, usando php, ¿qué piensan ustedes?
Hice un script php que verifica en qué página estoy y escribe activo o no en mis etiquetas a.
<?php function active($currect_page){ $url = str_replace(".php", "", basename($_SERVER['PHP_SELF'])); //name without .php if($currect_page == $url){ echo 'active'; //class name in css } } ?> <div class="right-nav"> <a href="#index" class="<?php active('index'); ?> active">Home</a> <a href="#archives" class="<?php active('archives'); ?>">Archives</a> </div>3 Respuestas
Responde la pregunta0
Como no uso el .php en mis páginas, elimino esa parte del nombre del archivo. Además de eso, uso el nombre base de PHP_SELF, para obtener el nombre del archivo actual. Si eso es igual al nombre en la función del menú, entonces escriba activo. El único problema aquí sería si tuviera dos archivos con el mismo nombre en diferentes directorios y los agregara al menú. Porque entonces ambos estarían resaltados, razón por la cual agregué basename(getcwd()) , para obtener el directorio principal, luego también incluye que la función debe llamarse con su nombre principal como active('website/index')
<?php function active($currect_page){ $url = basename(getcwd())."/".str_replace(".php", "", basename($_SERVER['PHP_SELF'])); //If filename is just "name" or "name.php" //Also checks which directory the file is in, to avoid highlighting multiple menu items with same name //$currect_page == $url :: parentFolder/fileName == parentFolder/fileName (without .php here) if($currect_page == $url || $currect_page == basename(getcwd())."/".basename($_SERVER['PHP_SELF'])){ echo 'active'; //class name in css } } ?> <div class="right-nav"> <a href="/metrics/website/index" class="<?php active('website/index'); ?>">Home</a> <a href="/metrics/website/pages/archives" class="<?php active('pages/archives'); ?>">Archives</a> </div>0
Si te entiendo bien, tienes dos páginas separadas, una titulada archivo y la otra titulada Inicio. Desea poder resaltar el nombre de la página que está abierta actualmente.
Sugeriría que, dado que tiene dos páginas en dos documentos, debería poder mover la clase a la otra opción en el sitio donde desea que aparezca como tal.
<DOCTYPE HTML> <head> <style> .topnav a.active { color: (colour you pick); } </style> </head> <body> <div class="right-nav"> <a href="/metrics/website/index" class="active">Home</a> <a href="/metrics/website/pages/archives">Archives</a> </div> </body> </html>0
Puedes cambiar la clase así:
document.getElementById("<arcive_id>").class = "active";