使用关闭按钮切换引导选项卡

Posted 2023-05-08

【中文标题】使用关闭按钮切换引导选项卡

【英文标题】：Toggling bootstrap tabs with a close button

【发布时间】：2014-08-07 02:15:24

【问题描述】：

我想知道如何通过单击活动选项卡按钮或“关闭”按钮来关闭 Twitter Bootstrap 中的当前选项卡。换句话说，我想知道如何从以下位置删除“活动”类：

活动标签按钮 活动选项卡窗格

用户流程如下：

开始时所有选项卡都未选中 用户单击选项卡并打开相关选项卡窗格 用户单击同一选项卡按钮关闭。 所有选项卡都已关闭。

选项卡窗格看起来像这样：

<div class="tab-pane fade active" id="tab01">
          Tab content #01
          <a>Close Me</a>
</div><!-- /#tab01 -->

希望这是有道理的，感谢您的帮助！

JS Fiddle 链接在这里：http://jsfiddle.net/dru_rustin/8Bw4z/

【问题讨论】：

发布你的代码。

【参考方案1】：

试试这个。由于一些发布请求问题，我无法在 jsfiddle 中演示它。

为按钮关闭添加一个 id。并为 unfocus 按钮附加一个新的 html 元素。 你的代码会是这样的。

<div id="configuration-panel" class="tab-content">
<div class="tab-pane fade active" id="tab01">Tab content #01 
<a href="target" class="btn btn-primary" id="closetab">Close active tab</a>
</div>

<!-- /#tab01 -->

追加css

#blur-hack 
    position: absolute;
    opacity: 0;

添加 javascript

$('#closetab').click(function (e) 
    e.preventDefault();
    $('#tab1').css("display", "none");
    $('#ur-hack').focus();
);