html - 内部带有 <a> 元素作为标签的单选按钮

Question

谁能告诉我我在这里做错了什么？
链接仍然有效，单选按钮仍然可以单击，只是标签不起作用。
我该如何重写它才能使其正常工作？

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>

我的目标是，如果您单击它，您将看到内容并且单选按钮被选中。

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>