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/

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

Noy Hadar

Answer 1

首先，类会不断变化，因此您需要一个委托的事件处理程序，但是jQuery UI会在事件处理程序触发之前更改类，因此它不会起作用，它将始终切换内容。

你必须保留自己的类，并跟踪它们，而不是依赖jQuery UI，除了在pageload设置默认类

$( "#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 2

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

它使用变量来保存最后打开的选项卡。如果选项卡没有更改，则切换显示，如果选项卡已更改，则显示内容。使用此方法不需要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;
});

Fiddle

Answer 3

原始答案

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

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

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

修改

如果这些是要求，最好将事件切换到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"); } });

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

3 个答案:

Fiddle