javascript - 将复选框 Bootstrap 到 TabPanel 选项卡不选中/取消选中

Question

问题是选项卡面板选项卡内的复选框未选中。

JSFiddle link

此处的 HTML 代码:

<ul class="nav nav-tabs" id="myTab">
    <li class="active">
        <a href="#home">
            <div style="margin: 0;" class="checkbox">
                <label style="float: left;">
                    <input style="display: inline-block;" type="checkbox" id="product" value="home" />
                    <div style="display: inline-block;">Home</div>
                </label>
            </div>
        </a>
    </li>
    <li>
        <a href="#profiles">
            <div style="margin: 0;" class="checkbox">
                <label style="float: left;">
                    <input style="display: inline-block;" type="checkbox" id="product" value="profiles" />
                    <div style="display: inline-block;">Profiles</div>
                </label>
            </div>
        </a>
    </li>
    <li>
        <a href="#messages">
            <div style="margin: 0;" class="checkbox">
                <label style="float: left;">
                    <input style="display: inline-block;" type="checkbox" id="product" value="messages" />
                    <div style="display: inline-block;">Messages</div>
                </label>
            </div>
        </a>
    </li>
</ul>

有什么想法吗？如何让这些复选框执行选中和取消选中功能？

Answer 1

您正在阻止它的点击。删除 e.preventDefault() 将解决问题