0

Preciso que seja feita a troca da cor das dos títulos de uma nav, colocando ID em cada um dos títulos consigo fazer. Existe algum modo de fazer essa troca sem colocar ID em todos os títulos, pegando pela class ou algo do tipo?

<script type="text/javascript">
    var integra = $("#bg-navbar").offset().top - 60;

    $(window).scroll(function() {
      if($(document).scrollTop() >= integra){
        $('#home').removeClass('text-light');
        $('#home').addClass('text-black');
      }else{
        $('#home').removeClass('text-black');
        $('#home').addClass('text-light');
      }
    });
  </script>

navbar

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-nav" id="nav" style="padding: 20px 20px;">
    <a class="navbar-brand text-light ml-5" href="#inicio">LOGO MARCA</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Alterna navegação">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link text-light mr-5" href="#home" id="home"><strong>Home </strong><span class="sr-only">(Página atual)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light mr-5" href="#destaque"><strong>Destaques</strong></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light mr-5" href="#preco"><strong>Preços</strong></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-light mr-3" href="#" id="navDropDow" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <strong>Link dropdown</strong>
          </a>
          <div class="dropdown-menu" aria-labelledby="navDropDow">
            <a class="dropdown-item" href="#acao">Ação</a>
            <a class="dropdown-item" href="#acao-2">Outra ação</a>
            <a class="dropdown-item" href="#acao-3">Algo mais aqui</a>
            <a class="dropdown-item" href="#contato">Algo mais aqui</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light" href="#preco"><i class="fas fa-search"></i></a>
        </li>
      </ul>
    </div>
  </nav>
1
  • Perdão @Anderson Carlos, fiz uma alteração durante em cima da sua e só percebi quando cliquei. Commented 21/01/2019 às 15:33

3 Respostas 3

3

Se cada link do menu possui a classe .nav-link, pode usar o seletor a.nav-link:

var integra = $("#bg-navbar").offset().top - 60;

$(window).scroll(function() {
   if($(document).scrollTop() >= integra){
      $('a.nav-link')
      .removeClass('text-light')
      .addClass('text-black');
   }else{
      $('a.nav-link')
      .removeClass('text-black')
      .addClass('text-light');
   }
});
1
  • deu certo desse jeito, muito obrigado. Commented 21/01/2019 às 17:08
0

Amigo se deseja aplicar o js pelas classes basta apenas trocar o seletor para $('.home'), desde que sua div tenha a classe home.

0

Desta maneira funciona se entendi bem oque Você quer!!!

$('.colors').css("color","blue");
$('.colors').click(function(){
   $('.colors').css("color","blue");
   $(this).css("color", "red"); 

});
            
            
       
        
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>    
    </head> 
    <nav>
        <a href="#" class="colors">iten1</a>
        <a href="#" class="colors">iten2</a>
        <a href="#" class="colors">iten3</a>
        <a href="#" class="colors">iten4</a>
    </nav>
    </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .