загрузчик 4 вкладки с кнопками с активным классом не работает

Question

У меня есть небольшая проблема, связанная с моими вкладками начальной загрузки 4:

Мое намерение слишком переключаться между кнопками, как в этом примере: https://codepen.io/anon/pen/vwQamK, но с начальной загрузкой.

  <div id="tab" class="btn-group btn-group-justified" data-toggle="buttons">
    <a href="#prices" class="btn btn-primary active" data-toggle="tab">
      <input type="radio" />Prices
    </a>
    <a href="#features" class="btn btn-default" data-toggle="tab">
      <input type="radio" />Features
    </a>
  </div>

  <div class="tab-content">
    <div class="tab-pane active" id="prices">Prices content</div>
    <div class="tab-pane" id="features">Features Content</div>
  </div>

В настоящее время переключение между содержимым вкладки не работает!

Вот мой кодовый блок:

https://codepen.io/user1010/pen/mYQvVo

Answer 1

С .Нав-таблетки

Вы можете использовать .nav-pills: https://getbootstrap.com/docs/4.3/components/navs/#pills

<div class="container">
    <div class="nav nav-pills">
        <a href="#prices" class="nav-link active" data-toggle="pill">
            Prices
        </a>
        <a href="#features" class="nav-link" data-toggle="pill">
            Features
        </a>
    </div>
    <div class="tab-content">
        <div class="tab-pane active" id="prices">Prices content</div>
        <div class="tab-pane" id="features">Features Content</div>
    </div> 
</div>

демо: https://jsfiddle.net/davidliang2008/dxzaufho/12/

С btn-group и пользовательскими стилями

<div class="container">
    <div class="nav btn-group">
        <a href="#prices" class="btn active" data-toggle="tab">
            Prices
        </a>
        <a href="#features" class="btn" data-toggle="tab">
            Features
        </a>
    </div>
    <div class="tab-content">
        <div class="tab-pane active" id="prices">Prices content</div>
        <div class="tab-pane" id="features">Features Content</div>
    </div> 
</div>

.btn-group.nav {
    display: inline-flex;
}

.btn-group .btn.active {
    background-color: var(--primary);
    color: #fff;
}

демо: https://jsfiddle.net/davidliang2008/dxzaufho/19/

Что касается вашей проблемы с тем, что ваша вкладка не работает, я открыл проблему в Github. В настоящее время похоже, что в качестве родительского класса вкладки необходимо указать .nav или .list-group, в противном случае вкладка не будет работать должным образом.

Answer 2

Похоже, что вместо ввода вы можете просто использовать текст и переключаться между контентом.

  <div id="tab" class="btn-group btn-group-justified" data-toggle="buttons">
    <a href="#prices" class="btn btn-primary active" data-toggle="tab">
      Prices
    </a>
    <a href="#features" class="btn btn-default" data-toggle="tab">
      Features
    </a>
  </div>

  <div class="tab-content">
    <div class="tab-pane active" id="prices">Prices content</div>
    <div class="tab-pane" id="features">Features Content</div>
  </div>