Tengo dos pestañas, Google y Yahoo! . El objetivo es que si la pestaña 'Google' está activa, el ícono de signo más (a la derecha) contendrá la URL basada en el condicional.
Ejemplo: si la pestaña 'Google' está activa, al hacer clic en el signo más se abrirá una página de google.com.
No estoy seguro de lo que estoy haciendo mal:
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>Recomendaría agregar un detector de eventos de click en el botón que verifica la pestaña activa y redirige en consecuencia:
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>Como dijo Spectric, sería ideal mover el cheque para que se base en el clic de una pestaña.
Aquí hay una implementación alternativa (requiere cambios en HTML y JS).
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>