Question

我正在研究一些简单的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/

Answer 1

这里有两个问题：

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

您将变量idTab设置为 string ，即点击任何<a>标记的目的地。但是这不会在脚本中的任何其他地方使用。

稍后，您致电

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

其中idTab仍设置为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)
    })
});

View the demo here.

Answer 2

正在工作 DEMO

试试这个

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

希望这有帮助，谢谢

jquery选项卡导航消失

2 个答案:

View the demo here.

正在工作 DEMO