javascript - 事件时如何自定义 Bootstrap 选项卡？

Question

我尝试制作一个网站，当选择其中一个 Bootstrap 选项卡时，它将像他们的 ID 名称一样显示。但是当选择选项卡时，它无法设置为事件状态。所以我想我可以让自定义事件类在被选中时跨越。那么，如何在选择时自定义选项卡。可能喜欢在选择时更改 span bg 颜色

我的 Bootstrap 代码，像这样

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

Answer 1

我想你想要这样:-

$('.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>