Question

我有三个标签，我使用button代替了ul和li标签。我希望第一个按钮自动激活或将颜色更改为绿色。我在引导程序中使用活动类，但是它根本不起作用。我该怎么做，以便用户知道他/她在哪里？这是我的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

您可以向active类添加自定义CSS

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

在jsfiddle上的演示

如何激活选项卡按钮？

1 个答案: