Jquery 设置（已激活）选项卡以执行功能

我正在尝试将活动选项卡用作关闭内容的按钮

因此，用户可以打开并在不同选项卡之间切换。但是，如果用户单击当前活动选项卡，则它将执行一项功能

jQuery

$( "#outerWrapper" ).tabs();
$('#tabs .ui-tabs-active').on('click', function(){
        $(" #contentSection ").toggleClass("dn");
});

CSS

HTML

AAA
BBB
CCC

我最大的努力就是这样；

它只识别第一个标签，作为我需要的机制

---

诺伊·哈达尔

原始答案

可能必须委托给

mousedown

vs

click

，以避免与jqueryui已有的click处理程序重叠

编辑：

如果这些是要求，最好将事件切换到

mouseup

，以更接近地反映

单击的时间。另外，添加一个条件：


首先，类不断变化，因此您需要一个委派的事件处理程序，但jqueryui在事件处理程序启动之前更改了类，因此它无法工作，它将始终切换内容

您必须保留自己的类，并跟踪这些类，除了在pageload中设置默认类之外，根本不依赖jQueryUI

$( "#outerWrapper" ).tabs();

var li = $('#tabs li');

li.filter('.ui-tabs-active').addClass('my_active')

li.on('click', function(){
    if ( $(this).hasClass('my_active') ) {
        $(" #contentSection ").toggleClass("dn");
    } else {
        $(" #contentSection ").removeClass("dn");
        li.removeClass('my_active');
        $(this).addClass('my_active');
    }
});

此代码使用委托事件处理程序，如@adeneo recommended

它使用一个变量来保存最后打开的选项卡。如果选项卡未更改，则切换显示；如果选项卡已更改，则显示内容。不需要使用此方法的
dn
类：

$("#outerWrapper").tabs();

var lastTab = $('#tabs .ui-tabs-active')[0];

$('#tabs').on('click', '.ui-tabs-active', function(){
  if(this===lastTab) {
    $("#contentSection").toggle();
  }
  else {
    $("#contentSection").show();
  }
  lastTab= this;
});

类不断变化，因此您需要一个委派的事件处理程序，如->
$（“#tabs”）。在（'click'，'.ui tabs active'，function（）{
，但这将在单击多个选项卡时以奇怪的模式切换类，因此可能根本不需要这样做->@adeneo谢谢，我认为这就成功了！：）这并不适用于所有情况。我知道，我在玩它，得出了与adeneoClose相同的结论，但我需要任何其他选项卡来重新打开内容。
$( "#outerWrapper" ).tabs();
$('#tabs').on('mousedown',  '.ui-state-active', function(){
    $(" #contentSection ").toggleClass("dn");
});

$( "#outerWrapper" ).tabs();
$('#tabs').on('mouseup',  'li', function(){
    if($(this).hasClass("ui-state-active")){
        $(" #contentSection ").toggleClass("dn");
    } else {
        $(" #contentSection ").removeClass("dn");
    }
});

$( "#outerWrapper" ).tabs();

var li = $('#tabs li');

li.filter('.ui-tabs-active').addClass('my_active')

li.on('click', function(){
    if ( $(this).hasClass('my_active') ) {
        $(" #contentSection ").toggleClass("dn");
    } else {
        $(" #contentSection ").removeClass("dn");
        li.removeClass('my_active');
        $(this).addClass('my_active');
    }
});

$("#outerWrapper").tabs();

var lastTab = $('#tabs .ui-tabs-active')[0];

$('#tabs').on('click', '.ui-tabs-active', function(){
  if(this===lastTab) {
    $("#contentSection").toggle();
  }
  else {
    $("#contentSection").show();
  }
  lastTab= this;
});