Question

[dfsq下面的回答]

所以这就是问题所在：

我正在使用与此http://jsfiddle.net/syahrasi/Us8uc/非常相似的标签系统，它在我已经在我的应用程序上构建的内容上运行得很好。但我真的很难在这个标签系统中使两个功能起作用：点击外面关闭当前标签，然后再点击a关闭标签（我猜是切换）。

$(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
});

我真的很感激这里的一些帮助。这真是让我烦恼，我在这里找不到任何具体的解决方案。

Answer 1

以下是如何做到这一点：

var $tabs = $(".tabs-menu a").click(function (event) {

    event.preventDefault();
    $(".tab-content").hide();

    var $parent = $(this).parent();

    if ($parent.is('.current')) {
        $parent.removeClass('current');
        $tabs.removeClass('current');
        return;
    }

    $tabs.removeClass('current');
    $parent.addClass("current");

    var tab = $(this).attr("href");
    $(tab).fadeIn();
}).parent();

$('body').click(function(e) {
    if (!$(e.target).closest('#tabs-container').length) {
        $tabs.filter('.current').find('a').click();
    }
});

单击本身和外部关闭基于jQuery的选项卡

1 个答案:

演示：http://jsfiddle.net/Us8uc/955/