Bootstrap 4 вкладки с кнопками с активным классом не работают

у меня есть небольшая проблема, связанная с моими вкладками bootstrap 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

button bootstrap-4 tabs

31.05.2019 15:09

5 дизайнов темных кнопок с использованием HTML и CSS

Здесь представлены пять дизайнов темных кнопок с кодом с использованием HTML и CSS:

4 279

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

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

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

как насчет эффекта кнопки визуального переключения, или, лучше сказать, переключения класса btn-primary на btn-default.

— 31.05.2019 22:58

Когда я делаю эту настройку и запускаю ее в вашем примере кода, я думаю, что это действительно переключает классы. Или я могу ошибаться

— 01.06.2019 06:04

31.05.2019 16:29

Ответ принят как подходящий

С .nav-таблетками

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

<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-группой и пользовательскими стилями

<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 в качестве родительского класса вкладки, иначе вкладка не будет работать должным образом.

Привет, Дэвид, спасибо за ваше решение, но я намерен использовать кнопки исключительно для сгруппированного дизайна. давайте посмотрим, может быть, на github будет решение. большой вклад

— 31.05.2019 23:00

31.05.2019 22:19

Bootstrap 4.3.1 рабочие вкладки как переключатели — jsfiddle

$(document).ready(function () {
  $('input[name = "intervaltype"]').click(function () {
      $(this).tab('show');
      $(this).removeClass('active');
  });
})

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 


<div class = "nav nav-tabs" role = "tablist">
<div>
    <input id = "optDaily" checked name = "intervaltype" type = "radio" data-target = "#scheduleDaily">
    <label for = "optDaily">Daily</label>
</div>
<div>
    <input id = "optWeekly" name = "intervaltype" type = "radio" data-target = "#scheduleWeekly">
    <label for = "optWeekly">Weekly</label>
</div>
<div>
    <input id = "optMonthly" name = "intervaltype" type = "radio" data-target = "#scheduleMonthly">
    <label for = "optMonthly">Monthly</label>
</div>
</div>
<div class = "tab-content">
    <div id = "scheduleDaily" class = "tab-pane active">Daily</div>
    <div id = "scheduleWeekly" class = "tab-pane">Weekly</div>
    <div id = "scheduleMonthly" class = "tab-pane">Montly</div>
</div>

21.11.2019 00:55

У меня та же проблема. Групповые кнопки работали очень хорошо на 4.31, но после того, как я сделал обновление на bootstrap 4.4 или 4.4.1, при обновлении они становятся активными все, и только после нажатия каждой кнопки они начинают работать правильно.

Предлагаю попробовать использовать bootstrap 4.3.1 на примере @Yevgeniy Afanasyev

04.12.2019 00:05