css - 如何激活标签按钮？

Question

我有三个选项卡，我使用 button 而不是 ul 和 li 标签。我希望第一个按钮自动激活或将颜色更改为绿色。我在 bootstrap 中使用 active 类，但它根本不起作用。我该怎么做才能让用户知道他/她在哪里？这是我的 jsfiddle: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;
  }

演示 jsfiddle