单击时启动引导选项卡关闭活动

Question

我有以下代码：

<div id="action_wrap">
    <div id="action_nav">
        <div class="action" data-target="#content1" data-toggle="tab">First Block</div>
        <div class="action" data-target="#content2" data-toggle="tab">Second Block</div>
        <div class="action" data-target="#content3" data-toggle="tab">Third Block</div>
    </div>
    <div id="action_items">
        <div class="action_text collapse" id="content1">
            <p>Content 1</p>
            <span class="close">Close</span>
            <div class="clearfix"></div>
        </div>
        <div class="action_text collapse" id="content2">
            <p>Content 2</p>
            <span class="close">Close</span>
            <div class="clearfix"></div>
        </div>
        <div class="action_text collapse" id="content3">
            <p>Content 3</p>
            <span class="close">Close</span>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

并使用 Twitter Boostrap 的“Tab”脚本，它工作得很好。我为关闭按钮和导航按钮添加了一些看起来非常令人讨厌的脚本来获取活动类，如下所示：

$(".action").click(function () {
    $(this).parent().children().removeClass("active");
    $(this).addClass("active");
    $(this).parent().addClass("active");
});

$(".close").click(function () {
    $(this).parent().parent().parent().children().removeClass("active");
    $(this).parent().parent().parent().children().children().removeClass("active");
});

虽然不多，但嗯，它正在工作。

我不能做的是通过单击活动导航 div 来关闭 Bootstrap 的选项卡。 这意味着如果我在 #content1 上单击第一个带有数据目标的 .action div，则 .action_text#content1 将获得 .active 类，我单击的 .action div 也将获得。我想要的是 .action.active data-target="#content1" 单击删除 .tab() 的类“active”并且其本身相同。

我在另一个线程中发现更改 Bootstrap 的 Tab 脚本中的代码

$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    e.preventDefault()
    $(this).tab('show')
})

但似乎每次我编辑它时，它都会破坏整个事情。我尝试像这样添加 if 语句

  $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      if ($(this).hasClass('active')) {
        $(this).tab().removeClass('active');
        $(this).removeClass('active');
      } else {
        e.preventDefault()
        $(this).tab('show')
      }
  })

但是整个事情都停止了。

Answer 1

首先，您应该尽量避免更改 Bootstrap 本机代码，否则您可能会失去升级到未来版本的能力。

关于您的问题，您可能会像我一样遇到一些事件并发问题...

如果您想在单击选项卡切换时关闭活动选项卡，请查看此处： http://bootply.com/61835（归功于katie，我不是这个脚本的所有者）

但是，如果您希望能够在以下情况下关闭活动选项卡（切换和窗格）：

• 单击活动选项卡切换
• 单击选项卡切换或窗格之外的任何其他位置
• 按 ESC 键

...那么这个脚本可能会帮助你：

$(function() {

    var active = $('a[data-toggle="tab"]').parents('.active').length;
    var tabClicked = false;

    // Closes current active tab (toggle and pane):
    var close = function() {
        $('a[data-toggle="tab"]').parent().removeClass('active');
        $('.tab-pane.active').removeClass('active');
        active = null;
    }

    // Closing active tab when clicking on toggle:
    $('[data-toggle=tab]').click(function(){
        if ($(this).parent().hasClass('active')){
            $($(this).attr("href")).toggleClass('active');
            active = null;
        } else {
            tabClicked = true;
            active = this;
        }
    });

    // Closing active tab when clicking outside tab context (toggle and pane):
    $(document).on('click.bs.tab.data-api', function(event) {
        if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) {
            close();
        }

        tabClicked = false;
    });

    // Closing active tab on ESC key release:
    $(document).keyup(function(e){
        if(active && e.keyCode === 27) { // ESC
            close();
        }
    });
});

你可以用这个 JSFiddle 尝试一下： http://jsfiddle.net/almeidap/EAuUY/（使用 Bootstrap 3）

Answer 2

即使使用完全限定的网址，这实际上也会关闭选项卡。

$('[data-toggle=tab]').click(function(){
  if ($(this).parent().hasClass('active')){
    var url = $(this).attr('href');
    var tid = url.split('#')[1];
    console.log(tid);
    $('#'+tid).toggleClass('active');
    document.location.hash = '';
  }
});
 ///  also can work with pills by switching to $('[data-toggle=pill]')

Answer 3

使用 jQuery 关闭 Bootstrap 5 打开的活动选项卡的方法：

jQuery(document).ready(function(){
  var activeTabId = false;
  jQuery(".nav-link[data-bs-toggle='tab']").click(function(){
    var clickedTab = jQuery(this);
    var clickedTabId = clickedTab.attr("id");
    if(activeTabId != clickedTabId){
        //On new tab click
        activeTabId = clickedTabId;
    }else{
        //On clicking of open tab -> Close tab
        clickedTab.removeClass("active").attr("aria-selected", false).attr("tabindex", ""); 
        jQuery(clickedTab.attr("data-bs-target")).removeClass("active show");
        activeTabId = false;
    }
});

});//就绪结束