change link (current) according to click

Question

change link (current) according to click

Navigation

#1 by (0 votes)

0

As I can change according to the clicked link, it is currently in the link and I want it to change to register and data

<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>

to test should click on the right-hand button

javascript css

asked by hubman 07.08.2018 в 06:24

source

1 answer

Create a form with advanced wordpress Error updating data #image

score 0 · Answer 1

How your navs are going to direct your page to a specific one, you only have to verify in the onload of your page which you are navigating the navs and the one that matches its href attribute with a part of the url where the navigator is standing active and I deactivate it. That is:

<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>