我尝试建立一个网站,当选择了一个“引导程序”选项卡时,它将像其ID名称一样显示。但选择该标签后,无法将其设置为活动状态。所以我认为我可以在选择时使自定义活动类跨越。因此,选择后如何自定义标签。可能像选择时更改跨度背景颜色
我的引导程序代码,像这样的Someting
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
<span data-toggle="pill" href="#lorem" class="btn btn-lg btn-default team-name">Lorem</span>
<span data-toggle="pill" href="#ipsum" class="btn btn-lg btn-default team-name">Ipsum</span>
</div>
<div class="tab-content">
<div id="lorem" class="tab-pane fade in active">
<div class="text-center head-text">
<h3>Lorem</h3>
</div>
</div>
<div id="ipsum" class="tab-pane fade">
<div class="text-center head-text">
<h3>ipsum</h3>
</div>
</div>
</div>
最佳答案
我想你想要这样:-
$('.tabsBtn').on('click', '.btn', function(){
$('.tabsBtn .btn').removeClass('activeClass');
$(this).addClass('activeClass');
});
.activeClass{ background:green !important; color:#fff !important;}
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6 tabsBtn">
<span data-toggle="pill" href="#lorem" class="btn btn-lg btn-default team-name">Lorem</span>
<span data-toggle="pill" href="#ipsum" class="btn btn-lg btn-default team-name">Ipsum</span>
</div>
<div class="tab-content">
<div id="lorem" class="tab-pane fade in active">
<div class="text-center head-text">
<h3>Lorem</h3>
</div>
</div>
<div id="ipsum" class="tab-pane fade">
<div class="text-center head-text">
<h3>ipsum</h3>
</div>
</div>
</div>
关于javascript - 激活时如何自定义 bootstrap 选项卡?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51335074/