如何激活选项卡按钮？

Question

我有三个选项卡，我使用button而不是ul和li标签。我要第一个按钮自动活动或改变颜色绿色。我在引导中使用了active类，但是它根本不起作用。我怎样做才能让用户知道他/她在哪里？这是我的小提琴：https://jsfiddle.net/heuvkro0/5/

  <div class="nav nav-pills mt-4">
    <button class="nav-link active btn btn-sm text-light bg-info font-weight-bold float-left" href="#profile" role="tab" data-toggle="tab">
        <span class="number text-light">1</span> 
            <span class="title text-light font-weight-bold pr-2">Beneficiary Details </span>
    </button>

    <button class="nav-link btn btn-sm text-light bg-info font-weight-bold float-left ml-2" href="#buzz" role="tab" data-toggle="tab">
            <span class="number text-light">2</span> 
            <span class="title text-light font-weight-bold pr-2">Dependent Details </span>
    </button>

    <button class="nav-link btn btn-sm text-light bg-info font-weight-bold float-left ml-2" href="#references" role="tab" data-toggle="tab">
            <span class="number text-light">3</span> 
        <span class="title text-light font-weight-bold pr-2">Complete Details </span>
    </button>
</div>

Answer 1

可以将自定义css添加到active类中。

 .nav-link.active {
     background-color: #117a8b !important;
  }

基于小提琴的演示