Question

我已尝试将标签与bootstrap v4中的单选按钮结合使用，但我无法使其完全正常工作。在v4中未能轻松适应之后，我发现了bootstrap v2的以下版本：

我试图让它们适应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

我试图做类似的事情。通过单选按钮触发选项卡窗格。我得到了＆＃34; onclick＆＃34;触发使用数据切换attr触发但是单选按钮没有得到＆＃34;：选中＆＃34;州。我的HTML代码段位于

之下

＆＃13;

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

＆＃13;

最后，我想出了自己的解决方案。我认为您可以将此代码合并到您的代码中。我删除了BS4.0数据attr触发器并创建了一个jQuery片段来触发hide（）和show（）;

JSFiddle

将Radiobuttons与标签组合

1 个答案: