1

Estoy usando Bootstrap 4.

Uso class="active" en mi navbar pero no cambia cuando hago click en los distintos items de mi menú.

Este es mi header.jsp con los archivos js/css/bootstrap:

<!-- Bootstrap -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="styles/common.css" type="text/css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- jQuery, Popper.js y Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Este es mi código navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <!-- <a class="navbar-brand" href="#">Navbar</a> -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="welcome/index.do"><spring:message code="master.page.inicio"/><span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="security/login.do"><spring:message code="master.page.noticias"/></a>
          <a class="nav-item nav-link" href="#"><spring:message code="master.page.documentacion"/></a>
        </div>
      </div>
</nav>  

Y este el script para cambiar el 'active':

<script type="text/javascript">
        $(".nav .nav-link").on("click", function(){
           $(".nav").find(".active").removeClass("active");
           $(this).addClass("active");
        });
</script>

El script no tiene ningún efecto y no caigo en qué estoy haciendo mal.

EDIT SOLUCIÓN:

Además de tener en cuenta la solución planteada por @alanfcm, para que el 'active' persista en una opción del menú que redirija a otra vista, es necesario añadir un script con la ruta de la opción del menú en cuestión en la vista correspondiente, no en el header. Quedaría así para el 1er item:

header.jsp:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <!-- <a class="navbar-brand" href="#">Navbar</a> -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="welcome/index.do"><spring:message code="master.page.inicio"/><span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="security/login.do"><spring:message code="master.page.noticias"/></a>
          <a class="nav-item nav-link" href="#"><spring:message code="master.page.documentacion"/></a>
        </div>
      </div>
</nav>

index.jsp:

<script type="text/javascript">         
    $(document).ready(function() {
          $('nav .nav-link .active').removeClass('active');
          $('a[href="' + 'welcome/index.do' + '"]').addClass('active'); 
        });
</script>

1 respuesta 1

1

El problema es tu selector de jQuery. Estas buscando por .nav o sea la clase nav. En su lugar tienes que buscar por el elemento nav. Simplemente remueve el punto.

<!DOCTYPE html>
<html lang="en">
    <!-- Bootstrap -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="styles/common.css" type="text/css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- jQuery, Popper.js y Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>    

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <!-- <a class="navbar-brand" href="#">Navbar</a> -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="welcome/index.do">(current)</a>
          <a class="nav-item nav-link" href="security/login.do">spring:message code="master.page.noticias"/</a>
          <a class="nav-item nav-link" href="#">spring:message code="master.page.documentacion"/</a>
        </div>
      </div>
</nav>

<div>
    <a href="?language=en">en</a> | <a href="?language=es">es</a>
</div>  
<script type="text/javascript">
        $("nav .nav-link").on("click", function(){
           $("nav").find(".active").removeClass("active");
           $(this).addClass("active");
        });
    </script>
</html>

7
  • Lo he cambiado pero sigue sin modificarse el 'active'
    – DaniR
    el 17 jul. 2018 a las 21:14
  • En mi ejemplo si funciona. Si seleccionas la tercera opcion, veras que tiene la clase active, recuerda que si el link recarga la pagina, el html se vuelve a generar, por lo que la primera opcion va a volver a tener la clase active
    – alanfcm
    el 17 jul. 2018 a las 21:17
  • He editado el post con la estructura completa que tengo en el header, porque no sé si es por tener algo dentro de un bloque que no debería, ya que no se me ocurre de que otra cosa podría ser
    – DaniR
    el 17 jul. 2018 a las 21:28
  • En tu codigo, cuando seleccionas la tercera opcion, te funciona?
    – alanfcm
    el 17 jul. 2018 a las 21:30
  • No, cuando inspecciono el elemento el 'active' sigue en la primera opción
    – DaniR
    el 17 jul. 2018 a las 21:32

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.