0

我正在研究一些简单的 jquery 导航选项卡。

动画有效，但是当您单击导航消失的按钮之一时。

我希望导航保留并仅显示内容。

$(".livefeed-tabs-comment a").click(function (e) {
    e.preventDefault();
    idTab = $(this).attr("href");
    $(".livefeed-tabs-comment .active").removeClass('active');
    $(this).addClass('active');
    $(idTab).siblings().stop().fadeOut(100, function () {
        setTimeout(function () {
            $(idTab).fadeIn(100);
        }, 100)
    })
})

演示

http://jsfiddle.net/CXMDa/5/

4

2 回答 2

0

这里有两个问题：

idTab = $(this).attr("href");

您将变量设置idTab为 a string，即<a>单击任何标签的目的地。但这在脚本中的其他任何地方都没有使用。

后来你打电话

$(idTab).siblings().stop().fadeOut(100, function() { ...

whereidTab仍然设置为 URL（它不是元素或 jQuery 对象）。

因此，您应该为$(this)对象设置一个变量，以便稍后在setTimeout. 此外，您的click活动选择器是".livefeed-tabs-comment a". 由于您的目标是<a>标签，并且每个标签都包含在 . 中<li>，这意味着它们没有任何同级可用于.siblings().

以下代码应该解决问题：

$(".livefeed-tabs-comment li").click(function(e){
    var $self = $(this),
        idTab = $self.attr("href");
    e.preventDefault();
    $self.addClass('active').siblings().removeClass('active').stop().fadeOut(100, function(){
        setTimeout(function(){
            $self.fadeIn(100);
        }, 100)
    })
});

在此处查看演示。

于 2013-09-17T16:35:21.510 回答
0

工作演示

尝试这个

 $(".livefeed-tabs-comment a").click(function (e) {
    e.preventDefault();
    idTab = $(this).attr("href");
    $(".livefeed-tabs-comment .active").removeClass('active');
    $(this).addClass('active');
    $(idTab).siblings('div').stop().fadeOut(100, function () {
        setTimeout(function () {
            $(idTab).fadeIn(100);
        }, 100)
    })
})

希望这有帮助，谢谢

于 2013-09-17T16:36:37.863 回答