Skip to main content
Correções ortográficas
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 127

troca Troca de cor com jqueryjQuery

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. Existe algum modemodo de fazer essa troca sem colocar ID em todos os títulos?, pegando pela class ou algo do tipo.?

troca de cor com jquery

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 mode de fazer essa troca sem colocar ID em todos os títulos? pegando pela class ou algo do tipo.

Troca de cor com jQuery

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?

Preciso que seja feita a troca da cor das dos títulos de uma <nav>nav, colocando IDID em cada um dos títulos consigo fazer, existe algum modomode de fazer essa troca sem colocar IDID em todos os títulos? Pegandopegando pela classclass 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>

HTML


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>

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>

HTML

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

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 mode 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>
adicionou 73 caracteres ao conteúdo
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

boa tarde,

precisoPreciso que seja feita a troca da cor das dos títulos de uma nav<nav>, colocando ID em cada um dos títulos consigo fazer, existe algum modemodo de fazer essa troca sem colocar ID em todos os títulos  ? pegandoPegando pela class ou algo do tipo.

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

navbarHTML

LOGO MARCAHome (Página atual)DestaquesPreçosLink dropdownAçãoOutra açãoAlgo mais aquiAlgo mais aqui
<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>

boa tarde,

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 mode de fazer essa troca sem colocar ID em todos os títulos  ? pegando pela class ou algo do tipo.

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');}});

navbar

LOGO MARCAHome (Página atual)DestaquesPreçosLink dropdownAçãoOutra açãoAlgo mais aquiAlgo mais aqui

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>

HTML

<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>
Fonte Link
Carregando