时间戳

首页 > 解决方案 > 单选按钮作为选项卡窗格控件

javascript - 单选按钮作为选项卡窗格控件

问题描述

Bootstrap 选项卡窗格具有锚标记作为选项卡控件，而不是选项卡按钮外观我需要单选按钮。

试图添加标签的单选按钮内容

<div id="tab" class="btn-group" style="width=500px; margin-bottom:20px;">
  <a href="#accept" class="radio " data-toggle="tab" style="float: left; margin-right: 20px; text-decoration: none;">
          <label>
             <input type="radio" value="accept" name="action" /> 
             Accept
          </label>
  </a>

  <a href="#discuss" class="radio" data-toggle="tab" style="float: right; text-decoration: none;">
          <label>
           <input type="radio" value="discuss" name ="action"/>
            Discuss
          </label>
  </a>
</div>

当用户单击单选按钮时，jquery 脚本将触发选项卡单击，这很好用

$("input:radio").click(function(event) {
  $(event.target).parents('a').trigger('click');
  event.stopPropagation();
});

整个代码 Js小提琴链接

问题

当用户单击标签时，选项卡正在分别选择，但单选按钮仍在先前的选择中

我试图解决的方法。1.添加了CSSpointer-events: none;这也会影响收音机。2. 检查单选按钮的脚本。这个动作调用其他js事件

我需要的。

用户只能点击单选按钮，不能点击标签部分

或者

当用户单击选项卡标签时，请检查相应的单选。

代码片段

预先感谢

标签： javascriptjqueryhtmltwitter-bootstrap

解决方案

这是检查收音机是否合适的代码。

$("input:radio").click(function() {
                $("#result").html($(this).val());
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab" class="btn-group" style="width=500px; margin-bottom:20px;">
            <a href="#accept" class="radio " data-toggle="tab" style="float: left; margin-right: 20px; text-decoration: none;">
                <label>
                    <input type="radio" value="accept" name="action" />
                    Accept
                </label>
            </a>

            <a href="#discuss" class="radio" data-toggle="tab" style="float: right; text-decoration: none;">
                <label>
                    <input type="radio" value="discuss" name ="action"/>
                    Discuss
                </label>
            </a>
        </div>
        <div id="result"></div>

希望这可以帮助 ！

推荐阅读