1

Estoy trabajando con un menú, el cual tiene las opciones de INICIO, REGISTRAR y MOSTRAR, cuando paso el cursor esas opciones cambian de color, eso funciona bien, lo que quiero hacer es que cuando entre a una de estas opciones permanezca el color, ya que al momento de dar click y entrar el color se quita, e intentado con la propiedad active en CSS pero no me funciona, aqui anexo mi código.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inicio</title>
    <link rel="stylesheet" href="navbar.css">
</head>
<body>

<header>
    <div class="row">
        <a href="home.php"></href></ahref><img src="imagenes/logo.png" alt="Logo-INE"></a>
        <ul class="main-nav">
            <?php if ($_SESSION['level'] == 1 || $_SESSION ['level'] == 2):?>
                <li><a href="home.php">INICIO</a></li>
                <li><a href="registrociudadanos.php">REGISTRAR</a></li>
                <li><a href="mostrar.php">MOSTRAR</a></li>
            <?php endif; ?>
            <li><?php echo $_SESSION["name"];?></li>
            <li><a href="salir.php">SALIR</a></li>
        </ul>
    </div>
</header>

</body>
</html>

CSS

header {
    font-weight: bold;
    background-color: white;
    height: 10vh ;
    background-size: cover;
    background-position: center;
    padding: auto;
    color: darkgrey;
    font-size: 15px;
    font-family: "Lucida Sans";
    border-bottom: #880e4f  2px solid;
    text-transform: uppercase;
}

.main-nav {
    float: right;
    list-style: none;
    margin-top: 30px;
    display: block;
}

.main-nav li {
    display: inline-block;
}

.main-nav li a {
    color: darkgrey;
    text-decoration: none;
    padding: 5px 20px;
    display: block;
    font-family: "Lucida Sans";
    font-size: 15px;

}
.main-nav li a:active {
    color: #c2185b;
}

.main-nav li a:hover {
    color: #c2185b;
}

img {
    width: 180px;
    height: auto;
    float: inherit;
}

2 respuestas 2

3

Espero esto sea lo que buscas amigo

La idea es usar en este caso jquery para ejecutar un evento click y al elemento que instancia agregarle la clase y a todos los demás quitársela

$(".ul").find("li").click(function(){
  $(".ul li").removeClass('estas')
  $(this).addClass('estas')
})
ul li {
  padding:10px;
  cursor:pointer;
}
.estas {
  background: rgb(68, 160, 185);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul">
    <li class="estas"><a href="#">boton1</a></li>
    <li><a href="#">boton2</a></li>
    <li><a href="#">boton3</a></li>
    <li><a href="#">boton4</a></li>
  </ul>

5
  • Si, es algo a si, lo intendo adaptar a mi codigo pero no me funciona Commented el 3 dic. 2017 a las 8:24
  • cuando haces click en un botón (li) cambias de url? osea cargas otra pagina o es un link interno? Commented el 3 dic. 2017 a las 8:39
  • Si, cambio de url Commented el 3 dic. 2017 a las 8:40
  • a bueno amigo la solución es agregarle la case al botón en donde te encuentras ubicado Commented el 3 dic. 2017 a las 8:47
  • osea en cada pagina que tengas el menu pones la clase de ejemplo estas para agregar los atributos necesarios Commented el 3 dic. 2017 a las 8:48
0

Al ser enlaces a páginas nuevas cada vez, lo mas sencillo es que a cada enlace de la página al crearla le coloques la clase con el color que quieras tener por ejemplo

<li class="activa"><a href="home.php">INICIO</a></li>

Otra opción por si estas trabajando con plantillas y no quieres modificar una a una sería

<?php
$pagina=array_pop(explode("/",$_SERVER["REQUEST_URI"]));
$pagina2=explode("?",$pagina);
?>

Con este código sabes en la página que estas trabajando

En los enlaces haces una condicional

<li <?php if ($pagina2=="home.php"){class="activa" }><a href="home.php">INICIO</a></li>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.