我尝试建立一个网站,当选择了一个“引导程序”选项卡时,它将像其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/

10-12 00:04
查看更多