pestañas seleccionadas en diferentes colores
Tengo una página con un enlace a otra página con pestañas.
<a href="https://example.com/page#span-01">Goal</a>
Aquí está el HTML
<div id="builder_tabs" class="tab-buttons tab-buttons-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#builder_tabs-0" data-toggle="tab">
<span id="span-00">Span00</span></a></li>
<li><a href="#builder_tabs-1" data-toggle="tab">
<span id="span-01">Span01</span></a></li>
<li><a href="#builder_tabs-2" data-toggle="tab">
<span id="span-02">Span02</span></a></li>
<li><a href="#builder_tabs-3" data-toggle="tab">
<span id="span-03">Span03</span></a></li>
</ul>
<div class="clearboth"></div>
</div>
<div class="tab-content">
<div class="tab-pane fade active in" id="builder_tabs-0"><strong>Tab-0</strong>
<p>Lorem Ipsum text</p>
</div>
<div class="tab-pane fade" id="builder_tabs-1"><strong>Tab-1</strong>
<p>Lorem Ipsum text</p>
</div>
<div class="tab-pane fade" id="builder_tabs-2"><strong>Tab-2</strong>
<p>Lorem Ipsum text</p>
</div>
<div class="tab-pane fade" id="builder_tabs-3"><strong>Tab-3</strong>
<p>Lorem Ipsum text</p>
</div>
</div>
Y el JQuery que funciona.
(function($) {
$(document).ready( function() {
var query = window.location.hash.substring(1);
if ($(query) ) {
$("ul.nav.nav-tabs li").removeClass("active");
$("#"+query).closest("li").addClass("active "+query );
$(".tab-content").addClass(query).show();
$(this).addClass(query).show();
}
});
})(jQuery);
Y con el CSS dependiendo de la consulta. En este ejemplo, span-01
.tab-content.span-01, li.active.span-01 a { background-color: powderblue;}
Ahora que esa parte está funcionando, también me gustaría cambiar el color de fondo cuando estoy en la página de pestañas. Con este código, el color de fondo de la pestaña seleccionada es el mismo en todas las pestañas. Y así no es como debería funcionar.
Cuando hago clic en una pestaña, mi idea es recuperar el valor de la identificación del intervalo (me refiero a span-01,02,03 o 04) y conservar esta variable para agregarla a la clase de contenido de la pestaña.
¿Algún consejo para hacer esto?
Para lograr el comportamiento que describió, donde el color de fondo de la pestaña seleccionada es diferente para cada pestaña, puede modificar su código jQuery para capturar el ID del intervalo cuando se hace clic en una pestaña y luego usar esa información para establecer el color de fondo apropiado.
Aquí hay una versión actualizada de su código jQuery:
(function($) {
$(document).ready(function() {
// Function to set the background color based on the span ID
function setTabBackgroundColor(spanId) {
// Remove existing classes based on span IDs
$(".tab-content").removeClass("span-00 span-01 span-02 span-03");
// Add the class based on the provided span ID
$(".tab-content").addClass(spanId);
}
// Initial check on page load
var query = window.location.hash.substring(1);
if ($(query)) {
$("ul.nav.nav-tabs li").removeClass("active");
$("#" + query).closest("li").addClass("active " + query);
$(".tab-content").addClass(query).show();
setTabBackgroundColor(query);
}
// Click event for tabs
$("ul.nav.nav-tabs li a").on("click", function() {
var spanId = $(this).find("span").attr("id");
setTabBackgroundColor(spanId);
});
});
})(jQuery);
con este código, introduce la función setTabBackgroundColor, que elimina las clases existentes según los ID de intervalo y agrega la clase apropiada según el ID de intervalo proporcionado. El evento de clic para las pestañas ahora llama a esta función para actualizar el color de fondo cuando se hace clic en una pestaña. Ajuste el CSS en consecuencia para los diferentes ID de tramo.
