Color change with jQuery

Asked

Viewed 77 times

0

I need you to change the color of the titles of a nav, putting ID in each of the titles I can do. Is there any way to make this exchange without putting ID in all titles, taking class or something like?

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

  • Sorry @Anderson Carlos, I made a change during on top of yours and only realized when I clicked.

3 answers

3


If each menu link has the class .nav-link, can use the selector 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');
   }
});

  • worked out that way, thank you very much.

0

Friend if you want to apply js to the classes just change the selector to $('.home'), as long as your div has the home class.

0

This way it works if I understand well what you want!!!

$('.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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.