0

En un menú navbar de bootstrap. ¿como poner la opción marcada? que clase usar?

<nav class="navbar navbar-default" role="navigation">
  <!-- El logotipo y el icono que despliega el menú se agrupan
       para mostrarlos mejor en los dispositivos móviles -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-ex1-collapse">
      <span class="sr-only">Desplegar navegación</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>

  <!-- Agrupar los enlaces de navegación, los formularios y cualquier
       otro elemento que se pueda ocultar al minimizar la barra -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="linkmenu"><a href="index.php">Biografía</a></li>
      <li class="linkmenu"><a href="discografia.php">Discografía</a></li>
      <li class="linkmenu"><a href="videos.php">Videos</a></li>
      <li class="linkmenu"><a href="descargas.php">Descargas</a></li>

  </div>
</nav>

1 respuesta 1

3

Con una clase .activa puedes conseguir este efecto, pero tendrás que añadir un poquito de jQuery para realizar la transición automáticamente:

Al hacer click sobre un enlace del menú, este se marcará como activo y el antiguo enlace con esta propiedad se desmarcará.

$( document ).ready(function() {
  $(".nav li").on("click", function(){
    $(".nav").find(".activa").removeClass("activa");
    $(this).addClass("activa");
  });
});
/*CSS*/
.activa{
	background-color:lightblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<body>
  <nav class="navbar navbar-default" role="navigation">
    <!-- El logotipo y el icono que despliega el menú se agrupan
         para mostrarlos mejor en los dispositivos móviles -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".navbar-ex1-collapse">
        <span class="sr-only">Desplegar navegación</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>

    <!-- Agrupar los enlaces de navegación, los formularios y cualquier
         otro elemento que se pueda ocultar al minimizar la barra -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="linkmenu"><a href="#">Biografía</a></li>
        <li class="linkmenu"><a href="#">Discografía</a></li>
        <li class="linkmenu"><a href="#">Videos</a></li>
        <li class="linkmenu"><a href="#">Descargas</a></li>
      </ul>
    </div>
  </nav>
</body>

Y por útlimo remarcar que tengas cuidado al cerrar tus etiquetas HTML ya que el elemento <ul class="nav navbar-nav"> no lo tienes cerrado en tu código.

Espero que te sirva, un saludo.

7
  • he añadido tu codigo js a bootstrap.js y en style.css he añadido nav.navbar li a.active { color:#658955; } pero no me funciona Commented el 17 oct. 2016 a las 10:49
  • @Rafahernandez No lo había probado porque no estaba en mi ordenador, actualizo la respuesta habiéndolo probado y verificando que funciona correctamente. Te recomiendo que los cambios no los añadas a los archivos originales de bootstrap, créate un fichero css y otro js para tu código y añádelos en el head al igual que añades los ficheros de bootstrap, pero procura no mezclarlos salvo que sea completamente necesario.
    – Hechi
    Commented el 17 oct. 2016 a las 12:44
  • ya he hecho lo que dices he creado un archivo .js para el javascript. en mi style.css he puesto .active.... pero ese estilo se aplica a las migas de pan no al menu. he probado con nav.navbar .active { background-color:lightblue; } pero no consigo que el .active se aplique al menú. Commented el 18 oct. 2016 a las 13:41
  • @Rafahernandez He actualizado mi respuesta con un ejemplo ejecutable funcionando correctamente. Revisa que tus archivos (tanto css como js) estén bien enlazados y que no tengas ningún error de sintaxis.
    – Hechi
    Commented el 19 oct. 2016 a las 6:44
  • No consigo hacerlo funcionar. he cerrado el </ul> he comprobado que se carge el script jquery que me has pasado. en el style.css he puesto .activa{....} pero no me funciona Commented el 19 oct. 2016 a las 7:12

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.