Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Problema com link ao alterar pagina

por Natan Gabriel Lara de Souza
| 96.2k xp | 37 posts
Programador Front-End

Pessoal, estou com um problema. Estou usando Bootstrap para criar um sistema interno e preciso que quando seleciona a pag no NAV a cor do link selecionado altere para vermelho mas não estou conseguir fazer isso. Já tentei atraves de CSS e através do Bootstrap mesmo e não consegui

Segue código, ao final tem o JS para alteração através de CSS que também não deu certo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Intranet ML</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
    <style type="text/css">
        .diferente{
        color: red;
        }
    </style>

  </head>
<body style="padding: 100px" class="">
    <nav class="container navbar navbar-expand-lg navbar-light bg-light fixed-top">

    <a class="mr-3 "href="/">
      <img class="navbar-brand img-fluid" style="max-width: 140px;" src="img/logo_ml.png" >
    </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 navbar-nav-scroll" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto justify-content-end flex-row bd-navbar-nav">
          <li class="nav-item">
            <a class="nav-link mr-3" href="/"></span> <strong>home</strong>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3" href="/"><strong>registro ponto</strong></a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3" href="/assinatura"><strong>gerar assinatura</strong></a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3" href="/"><strong>controle visitantes</strong></a>
          </li>
        </ul>
      </div>
    </nav>


  <!-- 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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<!------SCRIPT PARA ALTERAR COM DO MENU---->
  <!---USANDO CLASS "DIFERENTE" NA PAG ESTILO.CSS-->

    <script type="text/javascript">
      $(document).ready(function(){
      $("li a[href='"+location.href.substring(location.href.lastIndexOf("/")+1,255)+"']").addClass("diferente");
      });
    </script>

<!-----FIM DO SCRIPT--->

  </body>
</html>
3 respostas
solução!
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Natan você precisa adicionar a regra ao seu estilo.css mas precisamente nos links dos nav-link.

 .nav-link:visited {
 color:red; 
}

Se você quiser adicionar no hover também ficaria assim:

.nav-link:hover, .nav-link:visited {
 color:red; 
}

ou ainda poderia utilizar a marcação das classes do Bootstrap:

.navbar-light .navbar-nav .nav-link:visited {
    color:red;
}

Além disso teste utilizando links verdadeiros no href pois só assim teremos de fato um link visitado.ou substitua o / por #

<ul class="navbar-nav mr-auto justify-content-end flex-row bd-navbar-nav">
          <li class="nav-item">
            <a class="nav-link mr-3" href="#home">home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3" href="#registro">registro ponto</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3" href="#assinatura">gerar assinatura</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3" href="#controle">controle visitantes</a>
          </li>
        </ul>

Espero ter ajudado e bons estudos.

por Natan Gabriel Lara de Souza
| 96.2k xp | 37 posts
Programador Front-End

então, tentei da mesma forma que me disse e não obtive resultado

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Intranet ML</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/estilo.css">

    <style type="text/css">
      .diferente{
      color: red;
      }
    </style>


  </head>

<body style="padding: 100px" class="">
  <nav class="container navbar navbar-expand-lg navbar-light bg-light fixed-top">

  <a class="mr-3 "href="/">
    <img class="navbar-brand img-fluid" style="max-width: 140px;" src="img/logo_ml.png" >
  </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">

        <ul class="navbar-nav mr-auto justify-content-end  bd-navbar-nav">

          <li class="nav-item">
            <a class="nav-link mr-3" href="#home">home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3" href="#registro">registro ponto</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3" href="#assinatura">gerar assinatura</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3" href="#controle">controle visitantes</a>
          </li>
        </ul>
    </div>
  </nav>


  <!-- 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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<!------SCRIPT PARA ALTERAR COM DO MENU---->
  <!---USANDO CLASS "DIFERENTE" NA PAG ESTILO.CSS-->

    <script type="text/javascript">
      $(document).ready(function(){
      $("li a[href='"+location.href.substring(location.href.lastIndexOf("/")+1,255)+"']").addClass("diferente");
      });
    </script>

<!-----FIM DO SCRIPT--->

  </body>
</html>

CSS

.nav-item, .nav-item:hover .nav-item:visited {
    color:red;
}
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi Natan aqui funcionou de boa, acontece que vc tem que atribuir links verdadeiros conforme vc vai clicando eles vão ficando vermelhos mas depois que todos estiverem vermelhos não volta a ficar preto, fica tudo vermelho.

O teste que fiz:

<ul class="navbar-nav mr-auto justify-content-end  bd-navbar-nav">

          <li class="nav-item">
            <a class="nav-link mr-3 link" href="https://www.xuxa.com">home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3 link" href="https://www.sbt.com.br">registro ponto</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3 link" href="https://www.maria.com">gerar assinatura</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mr-3 link" href="https://www.netflix.com">controle visitantes</a>
          </li>
        </ul>

ESTILO.CSS

a.nav-link.mr-3.link:visited {
 color:red; 
}