Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

231
Visualizações
How to change the URL of an anchor tag based on current active tab?

I have two tabs, Google and Yahoo!. The goal is that if the 'Google' tab is active, then the plus sign icon (on the right) will contain the URL based on the conditional.

Example: If 'Google' tab is active, then clicking on the plus sign should open a google.com page.

I'm not sure what I'm doing wrong:

let activeTab = document.querySelector(".nav-tabs li.active");
let selectedForm = document.querySelector("#formSelector");

if (activeTab.textContent == "Google") {
  selectedForm.setAttribute("onclick", "location.href='https://www.google.com'");
} else if (activeTab.textContent == "Yahoo!") {
  selectedForm.setAttribute("onclick", "location.href='https://www.yahoo.com'");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Dynamic Tabs</h2>

  <ul class="nav nav-tabs">
    <li class="active">
      <a data-toggle="tab" href="#google">Google</a>
    </li>
    <li>
      <a data-toggle="tab" href="#yahoo">Yahoo!</a>
    </li>
    <li class="pull-right">
      <a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>        
    </li>
  </ul>

  <div class="tab-content">
    <div id="google" class="tab-pane fade in active">
      <h3>Google</h3>
      <p>This should change the plus sign icon to google.com</p>
    </div>
    <div id="yahoo" class="tab-pane fade">
      <h3>Yahoo!</h3>
      <p>This should change the plus sign icon to yahoo.com</p>
    </div>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

I would recommend adding a click event listener on the button that checks the active tab and redirects accordingly:

let selectedForm = document.querySelector("#formSelector");

selectedForm.addEventListener('click', function() {
  let activeTab = document.querySelector(".nav-tabs li.active");
  if (activeTab.textContent.trim() == "Google") {
    location.href = 'https://google.com'
  } else {
    location.href = 'https://yahoo.com'
  }
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>

  <ul class="nav nav-tabs">
    <li class="active">
      <a data-toggle="tab" href="#google">Google</a>
    </li>
    <li>
      <a data-toggle="tab" href="#yahoo">Yahoo!</a>
    </li>
    <li class="pull-right">
      <a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="google" class="tab-pane fade in active">
      <h3>Google</h3>
      <p>This should change the plus sign icon to google.com</p>
    </div>
    <div id="yahoo" class="tab-pane fade">
      <h3>Yahoo!</h3>
      <p>This should change the plus sign icon to yahoo.com</p>
    </div>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza Relatório

0

As Spectric said, moving the check to be based on click of a tab would be ideal.

Here's an alternative implementation (requires HTML & JS changes).

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>

  <ul class="nav nav-tabs">
    <li class="active">
      <a data-toggle="tab" href="#google" related-url="https://google.com">Google</a>
    </li>
    <li>
      <a data-toggle="tab" href="#yahoo" related-url="https://yahoo.com">Yahoo!</a>
    </li>
    <li class="pull-right">
      <a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>        
    </li>
  </ul>

  <div class="tab-content">
    <div id="google" class="tab-pane fade in active">
      <h3>Google</h3>
      <p>This should change the plus sign icon to google.com</p>
    </div>
    <div id="yahoo" class="tab-pane fade">
      <h3>Yahoo!</h3>
      <p>This should change the plus sign icon to yahoo.com</p>
    </div>
  </div>
</div>

Javascript

<script>
    const tabClick = document.querySelectorAll(".nav-tabs");
    const selectedForm = document.querySelector("#formSelector");

    tabClick.forEach((tabEl) => {
      tabEl.addEventListener('click', (e) => {
        console.log(tabEl);
        console.log(e);
        selectedForm.setAttribute('href', e.target.getAttribute('related-url'));
      });
    })
</script>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda