Question

我可以成功地将活动标签和非活动标签的颜色更改为一组，但是当我转到下一个标签时，它可能保持不变。

我试过这里：http://jsfiddle.net/pThn6/2031/

当2nd标签处于有效状态时，1st颜色将为red。 3rd有效1st and 2nd颜色为red时的方式相同。

有可能吗？

提前致谢。

Answer 1

你可以通过三行jquery实现这一点。

update fiddle

工作示例

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>

希望这有帮助！

Answer 2

是的，一切皆有可能lol

试试这个：

＆＃13;

$('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');
    }
  });
});

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.container {
  margin-top: 10px;
}

.active-red {
  color: red;
}

＆＃13;

<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>

＆＃13;

Bootstrap nav-tabs活动颜色为每个Bootstrap活动选项卡更改为不同的颜色

2 个答案: