Puedo cambiar con éxito el color de la pestaña activa y las pestañas no activas como grupo, pero ¿es posible que permanezca igual cuando vaya a la siguiente pestaña?
aquí probé: http://jsfiddle.net/pThn6/2031/
Cuando la 2nd pestaña esté activa, el 1st color será red . De la misma manera, cuando el 3rd color activo, el 1st and 2nd serán red .
¿Es posible?
Gracias por adelantado.
Puede lograr esto con tres líneas de jquery.
Ejemplo de trabajo
function activaTab(tab) { $('.nav-tabs a[href="#' + tab + '"]').tab('show'); }; $("#n_tab li a").click(function() { $(this).parent().prevAll().addClass('redcol'); $(this).parent().nextAll().removeClass('redcol'); }); .redcol>a { color: red; } <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <ul id="n_tab" class="nav nav-tabs"> <li><a href="#aaa" data-toggle="tab">1st</a></li> <li><a href="#bbb" data-toggle="tab">2nd</a></li> <li><a href="#ccc" data-toggle="tab">3rd</a></li> <li><a href="#ccc" data-toggle="tab">4th</a></li> </ul> <div class="tab-content" id="tabs"> <div class="tab-pane" id="aaa">...Content...</div> <div class="tab-pane" id="bbb">...Content...</div> <div class="tab-pane" id="ccc">...Content...</div> </div> </body> </html>¡Espero que esto ayude!
Sí, todo es posible jajaja
prueba esto:
$('ul li a').live('click', function() { let numClicked = $(this).parent('li').index(); $("a").each(function(index) { if (index <= numClicked) { $(this).addClass('active-red'); } else { $(this).removeClass('active-red'); } }); }); @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'); .container { margin-top: 10px; } .active-red { color: red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <ul class="nav nav-tabs"> <li><a href="#aaa" data-toggle="tab">1st</a></li> <li><a href="#bbb" data-toggle="tab">2nd</a></li> <li><a href="#ccc" data-toggle="tab">3rd</a></li> <li><a href="#ccc" data-toggle="tab">4th</a></li> </ul> <div class="tab-content" id="tabs"> <div class="tab-pane" id="aaa">...Content...</div> <div class="tab-pane" id="bbb">...Content...</div> <div class="tab-pane" id="ccc">...Content...</div> </div>