设置（已经）活动的选项卡以执行功能

Question

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

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

jQuery

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

CSS

.dn{display:none}

HTML

<div id="outerWrapper" class="mainWrapper" >
        <div id="tabs">
            <ul>
                <li><a href="#tab-1">One</a></li>
                <li><a href="#tab-2">Two</a></li>
                <li><a href="#tab-3">Three</a></li>
            </ul>
        </div>
        <div id="contentSection">
            <div id="tab-1">AAA</div>
            <div id="tab-2">BBB</div>
            <div id="tab-3">CCC</div>
        </div>  
</div>

这是我最大的努力； http://jsfiddle.net/noyhadar/np8p2oy0/31/

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

诺伊·哈达尔

Answer 1

原答案

可能必须委派给 mousedown 与 click 以避免与 jquery ui 已经存在的点击处理程序重叠。

http://jsfiddle.net/xLsuru1c/1/

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

编辑：

如果这些是要求ui的备注，最好将事件切换到 mouseup 以更接近 click 的时间安排。另外，添加一个条件：

http://jsfiddle.net/xLsuru1c/2/

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

Answer 2

首先，classes 不断变化，因此您需要一个委托的事件处理程序，但是 jQuery UI 在您的事件处理程序之前更改 classes火，所以它不会工作，它总是会切换内容。

您必须保留自己的 classes，并跟踪它们，而不是完全依赖 jQuery UI，除了设置默认值 class 在页面加载时

$( "#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');
    }
});

FIDDLE

Answer 3

此代码使用委托事件处理程序，如@adeneo 推荐的。

它使用一个变量来保存最后打开的标签页。如果选项卡没有更改，它会切换显示，如果选项卡有更改，它会显示内容。 dn class 无需使用此方法：

$("#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;
});

设置（已经）活动的选项卡以执行功能

Setting the (already) active tab to perform function

jquery

jquery-ui-tabs

Fiddle