I can successfully change the color of the active tab and non active tabs as a group, but is it possible remain same when i go next tab.
here i tried : http://jsfiddle.net/pThn6/2031/
When 2nd tab active the 1st color will be red. same way when 3rd active 1st and 2nd color will be red.
is it possible?
Thanks in advance.
You can achieve this with three lines of jquery.
Working Example
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>Hope this helps!
Yes, anything is possible lol
try this:
$('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>