0

Estoy haciendo una página y no se aplica la clase active del todo, vuelve la clase active al que está por defecto , ¿por qué pasa esto? Este es el link de la página llanes

Este es el código, pero aquí si se me ejecuta

$(function() {
            // elementos de la lista
            var menues = $("#navbarSupportedContent .navbar-nav .nav-item"); 
                // manejador de click sobre todos los elementos
                menues.click(function() {
                    // eliminamos active de todos los elementos
                    menues.removeClass("active");
                    // activamos el elemento clicado.
                    $(this).addClass("active");
                });
        });
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
	color: #000;
	font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--     BARRA DE NAVEGACIÓN -->
    <div class="container-fluid  p-1 sticky-top" style="background: #F6F6F6;">
    	<div class="container" style="padding-left: 0px;padding-right: 0px;">
    		<nav class="navbar navbar-expand-lg navbar-light" style="background: #F6F6F6;">
			  <a class="navbar-brand" href="index"><img src="img/yllanes/logo.png" class="img-fluid" alt="" style="width: 150px;"></a>
			  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			    <span class="navbar-toggler-icon"></span>
			  </button>

			  <div class="collapse navbar-collapse" id="navbarSupportedContent">
			    <ul class="navbar-nav ml-auto">
			      <li class="nav-item active">
			        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">Quienes Somos</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">Semblanza</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">Servicios Jurídicos</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">Noticias</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">Contácto</a>
			      </li>
			    </ul>
			  </div>
			</nav>
    	</div>
    </div>
<!-- FIN DE BARRA DE NAVEGACIÓN -->


<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

img

2
  • Para añadir la clase active, deberías comparar con la ruta actual, los listener no funcionan para este caso, ya que al cambiar de página esto queda invalidado. Como ejemplo base
    – Dev. Joel
    el 25 abr. 2019 a las 23:52
  • y como hago eso? el 25 abr. 2019 a las 23:53

1 respuesta 1

0

Necesitas apuntar al item que tiene la clase active, en este caso es nav-item, y ya con eso debería de eliminar el actual y aplicarle el active al nuevo.

$(function() {
            // elementos de la lista
            var menues = $(".nav-item"); 
                // manejador de click sobre todos los elementos
                menues.click(function() {
                    // eliminamos active de todos los elementos
                    menues.removeClass("active");
                    // activamos el elemento clicado.
                    $(this).addClass("active");
                });
        });
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
	color: #000;
	font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--     BARRA DE NAVEGACIÓN -->
    <div class="container-fluid  p-1 sticky-top" style="background: #F6F6F6;">
    	<div class="container" style="padding-left: 0px;padding-right: 0px;">
    		<nav class="navbar navbar-expand-lg navbar-light" style="background: #F6F6F6;">
			  <a class="navbar-brand" href="index"><img src="img/yllanes/logo.png" class="img-fluid" alt="" style="width: 150px;"></a>
			  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			    <span class="navbar-toggler-icon"></span>
			  </button>

			  <div class="collapse navbar-collapse" id="navbarSupportedContent">
			    <ul class="navbar-nav ml-auto">
			      <li class="nav-item active">
			        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">Quienes Somos</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">Semblanza</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">Servicios Jurídicos</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">Noticias</a>
			      </li>
			      <li class="nav-item">
			        <a class="nav-link" href="#">Contácto</a>
			      </li>
			    </ul>
			  </div>
			</nav>
    	</div>
    </div>
<!-- FIN DE BARRA DE NAVEGACIÓN -->


<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

3

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