Question

Can anyone tell me what I've done wrong here?
The links still work and the radio buttons can still be clicked, only the label doesn't work.
How do I have to rewrite it to make it work?

Html:

<ul class="nav nav-pills nav-stacked" role="tablist">
    <li role="presentation" class="active">
        <input type="radio" name="RADIO" id="Oneradio">
            <a href="#ONE" aria-controls="ONE" role="tab" data-toggle="tab" style="margin-right: 20px">
                <label for="Oneradio">
                    ONE
                </label>
            </a>
        </input>
    </li>
    <li role="presentation">
        <input type="radio" name="RADIO" id="Tworadio">
            <a href="#TWO" aria-controls="TWO" role="tab" data-toggle="tab">
                <label for="Tworadio">
                    TWO
                </label>
            </a>
        </input>
    </li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="ONE">
        ONE Content
    </div>
    <div role="tabpanel" class="tab-pane" id="TWO">
        TWO Content
    </div>
</div>

My goal is that if you click it, you will see the content and the radio button is checked.

https://jsfiddle.net/ye361u24/1/

的单选按钮

Answer 1

您的标签需要位于您的输入代码之外。否则，它将找不到关联的ID。像这样嵌套它似乎是合乎逻辑的，因为它们都是“链接在一起”的，但是必须将它们视为单独的实体。

<ul class="nav nav-pills nav-stacked" role="tablist">
<li role="presentation" class="active">
    <input type="radio" name="RADIO" id="Oneradio">    
    </input>
    <a href="#ONE" aria-controls="ONE" role="tab" data-toggle="tab" style="margin-right: 20px">
            <label for="Oneradio">
                ONE
            </label>
    </a>
</li>
<li role="presentation">
    <input type="radio" name="RADIO" id="Tworadio">
    </input>
    <a href="#TWO" aria-controls="TWO" role="tab" data-toggle="tab">
            <label for="Tworadio">
                TWO
            </label>
    </a>
</li>

<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="ONE">
    ONE Content
</div>
<div role="tabpanel" class="tab-pane" id="TWO">
    TWO Content
</div>

Answer 2

该链接将阻止标签的作用

这是您可以解决的快速内联技巧：

<label for="Oneradio" onclick="$('#Oneradio').prop('checked', true);">
  ONE
</label>

这是在标签旁边，需要位于输入代码之外。

https://jsfiddle.net/ye361u24/28/

Answer 3

我编辑了单选按钮，并添加了一个类和一个值。然后，您可以使用一些JavaScript来更改选项卡窗格

<ul class="nav nav-pills nav-stacked" role="tablist">
<li role="presentation" class="active">
    <input type="radio" name="RADIO" id="Oneradio" class="radiogroup" value="ONE">
        <a href="#ONE" aria-controls="ONE" role="tab" data-toggle="tab" style="margin-right: 20px" id="onelink">
            <label for="Oneradio" onclick="$('#Oneradio').prop('checked', true);">
                ONE
            </label>
        </a>
    </input>
</li>
<li role="presentation">
    <input type="radio" name="RADIO" id="Tworadio" class="radiogroup" value="TWO">
        <a href="#TWO" aria-controls="TWO" role="tab" data-toggle="tab" id="twolink">
            <label for="Tworadio" onclick="$('#Tworadio').prop('checked', true);">
                TWO
            </label>
        </a>
    </input>
</li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="ONE">
        ONE Content
    </div>
    <div role="tabpanel" class="tab-pane" id="TWO">
        TWO Content
    </div>
</div>

Javascript：

$('.radiogroup').change(function(e){
    var selectedValue = $(this).val();
    if (selectedValue == "ONE"){
        $('#onelink').click();
    }else{
        $('#twolink').click();
    }
});

示例：https://jsfiddle.net/3q9vaxue/3/

带有<a> element inside as label

3 个答案: