All geek questions in one place

Active Bootstrap Boot Tab Color Change to a different color for each Active Bootstrap tab

I can successfully change the color of the active tab and inactive tabs as a group, but is it possible to stay the same when I go to the next tab.

here I tried: http://jsfiddle.net/pThn6/2031/

When the tab is 2ndactive, the color 1stwill be red. also when the 3rdactive color 1st and 2ndwill be red.

Is it possible?

Thanks in advance.

+6
source share
2 answers

You can achieve this with three lines of jquery.

update script

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>
Run codeHide result

, !

+3

, lol

:

$('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>
Hide result
0

Source: https://habr.com/ru/post/1016237/

More articles:


All Articles