Объедините радиопереключатели с вкладками

Question

Я пытался объединить вкладки с переключателями в bootstrap v4, но я не мог заставить его работать полностью. После неудачной попытки адаптировать его в v4 я нашел следующие версии для bootstrap v2:

• Использование переключателей для управления вкладками с помощью начальной загрузки
• http://bootsnipp.com/snippets/featured/radio-button-tabs

Я пытался адаптировать их к v4, но не смог заставить его работать полностью. Либо вкладка не меняется, либо active состояние больше не поддерживается.

Общий код представлен в следующем:

<div class="btn-group" data-toggle="buttons">
  <a id="a_rr_html" href="#html" class="btn btn-primary active" data-toggle="tab"><input type="radio" />HTML</a>
  <a id="a_rr_json" href="#json" class="btn btn-primary" data-toggle="tab"><input type="radio" />JSON</a>
</div>

<div class="tab-content">
  <div class="html tab-pane active" id="html" role="tabpanel">
  </div>
  <div class="tab-pane" id="json" role="tabpanel">
  </div>
</div>

Если я удалю data-toggle="tab"Активное состояние переключателя снова поддерживается правильно, но, очевидно, вкладки больше не меняются. Когда я создал пользовательскую функцию onClickобратный вызов начальной загрузки больше не вызывался. Насколько я мог понять, сочетание обоих препятствует нормальной работе некоторых обратных вызовов начальной загрузки, что приводит к описанным проблемам.

Answer 1

Я пытался сделать что-то подобное. Запуск панели вкладок с помощью переключателя. Я получил триггер "onclick" для запуска с помощью переключателя данных, но переключатель не получал состояние ": флажок". Мой HTML-фрагмент ниже

<form id="selectForm">
    <ul class="nav flex-column">
        <li class="nav-item" >
            <label class="custom-control custom-radio" data-toggle="tab" data-target="#onlyON">                            
                <input type="radio" name="distTravel" value="state" class="custom-control-input"/>
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Travel within State</span>
            </label>
        </li>
        <li class="nav-item">
            <label class="custom-control custom-radio" data-toggle="tab" data-target="#onlyNA"> 
                <input type="radio" name="distTravel" value="NA" class="custom-control-input"/>
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description"> Travel within NA</span>
            </label>
        </li>
        <li class="nav-item">
            <label class="custom-control custom-radio" data-toggle="tab" data-target="#world"> 
                <input type="radio" name="distTravel" value="World" class="custom-control-input" />
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description"> International Travel</span>
            </label>
        </li>
    </ul>
</form>

<div class="tab-content">
    <div class="card-block tab-pane" id="onlyON" >
        "foo"
    </div>
    <div class="card-block tab-pane" id="onlyNA" >
        "boo"
    </div>
    <div class="card-block tab-pane" id="world" >
        "soo"
    </div>
</div>

В конце концов, я просто придумал собственное решение. Я думаю, что вы можете включить этот код в свой. Я удалил триггеры attr данных BS4.0 и создал фрагмент jQuery для запуска hide() и show ();

JSFiddle