0

como puedo ir cambiando segun el link clickeado, actualmente esta en el link ingresar y quiero que vaya cambiando a registrar y datos

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="/">title</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="/ingresarUsuarios">Ingresar<span class="sr-only">(current)</span></a><a class="nav-item nav-link" href="/registroUsuarios">Registrar</a><a class="nav-item nav-link" href="/investigacion">datos</a></div>
  </div>
</nav>

para probar deben clickear en el boton del lado derecho

1
  • ¿Qué es lo que debe cambiar y después de qué acción? Si pulso en el botón derecho se abre y cierra el menú, ¿quieres que cada vez que se abra esté un enlace diferente activo? No termina de quedar claro en tu pregunta qué es lo que quieres hacer.
    – Alvaro Montoro
    Commented el 7 ago. 2018 a las 12:52

1 respuesta 1

0

Cómo tus navs van a direccionar tu pagina hacia una en especifico solo debes verificar en el onload de tu pagina en cual estas, recorrer los navs y el que coincida su atributo href con una parte de la url donde esta parado el navegador lo activo y sino lo desactivo. Es decir:

<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
      //Obtengo la url de donde estoy
      var url = location.toString();
      //Obtengo todos los vinculos
      var navs = document.querySelectorAll('.nav-item');
      //Recorro los vinculos para buscar el que coincida con la url donde estoy
      for(var i=0;i<navs.length;i++){
        //Reemplazo del href el caracter / al comienzo para mas comodidad
        var nav_url = navs[i].getAttribute('href').replace(/^\/+/, '');
        //Si el href del link esta contenido dentro de la url actual...
        if(url.toLowerCase().indexOf(nav_url.toLowerCase()) > 0){
            //Agrego la clase active al link
            navs[i].setAttribute('class', navs[i].getAttribute("class")+" active");
        } else {
           //Sino elimino la clase active (siempre y cuando esta este)
           navs[i].setAttribute('class', navs[i].getAttribute("class").replace("active", ""));
        }
      }
    });
</script>

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.