Tôi có thể thay đổi thành công màu của tab hoạt động và các tab không hoạt động thành một nhóm, nhưng có thể vẫn giữ nguyên khi tôi chuyển sang tab kế tiếp.Các tab navstrap màu hoạt động Thay đổi thành màu khác nhau cho mỗi Tab khởi động Bootstrap
đây tôi đã cố gắng: http://jsfiddle.net/pThn6/2031/
Khi 2nd tab hoạt động các 1st màu sẽ red. giống như cách khi 3rd hoạt động 1st and 2nd màu sẽ là red.
là nó có thể?
Xin cảm ơn trước.
Vâng, bất cứ điều gì có thể lol
thử điều này:
$('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>Bạn có thể đạt được điều này với ba dòng jquery.
làm việc Ví dụ
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!