Bootstrap nav-tabs 活动颜色为每个 Bootstrap 活动选项卡更改为不同的颜色
Posted
技术标签:
【中文标题】Bootstrap nav-tabs 活动颜色为每个 Bootstrap 活动选项卡更改为不同的颜色【英文标题】：Bootstrap nav-tabs active color Change to a Different Colour For Each Bootstrap Active Tab 【发布时间】：2017-08-26 17:45:09 【问题描述】：我可以成功地将活动选项卡和非活动选项卡的颜色作为一个组更改，但是当我转到下一个选项卡时是否可能保持不变。
我在这里尝试过：http://jsfiddle.net/pThn6/2031/
当2nd 选项卡处于活动状态时，1st 颜色将为red。同样的方式，当3rd 活动1st and 2nd 颜色将是red。
有可能吗？
提前致谢。
【问题讨论】：
【参考方案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>希望这会有所帮助！
【讨论】：
【参考方案2】：是的，一切皆有可能，哈哈
试试这个：
$('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>【讨论】：
以上是关于Bootstrap nav-tabs 活动颜色为每个 Bootstrap 活动选项卡更改为不同的颜色的主要内容，如果未能解决你的问题，请参考以下文章
在不更改 URL 的情况下创建 Twitter Bootstrap 'nav-tabs' 菜单 - 可以吗？
python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)
为Bootstrap标签页切换nav-tab组件添加 切换回调方法 - callback