Jquery 在第二次单击时停止为容器设置动画

这里的问题是，我点击主导航链接它动画的主要内容离开，但我点击相同的链接两次内容消失。任何人请在这方面帮助我：

这里是链接

以下是我正在使用的代码：

var tab, lasttab;
var defaultTab = '#profile-tab';
var direction = "rtl"; // Right To Left

$('.tab').hide();

function showTab(id) {
    id = id.replace("-tab", "");
    //window.location.hash = id;

    if (tab) {
        direction = (tab.attr('data-index') < $(id + "-tab").attr('data-index')) ? "rtl" : "ltr";
        lasttab = tab;
        lasttab.animate({
            'margin-left': (direction == "rtl") ? -0 - $(window).width() : -0 + $(window).width(),
            opacity: 1
        }, 1000, "easeInOutExpo", function () {
            $(this).hide();
        });

        if (tab.attr('id') == "team-tab") {
            $('#members-tab').animate({
                'margin-left': $(window).width(),
                opacity: 1
            }, 1000, "easeInOutExpo", function () {
                $(this).hide();
                $(this).unbind('click');
            });
        }
    }


    $('.nav').find('.current').removeClass('current');
    $('a[href="' + id + '"]').parent().addClass('current').prev().css('');

    tab = $(id + "-tab");
    tab.css({
        'margin-left': (direction == "rtl") ? -0 + $(window).width() : -0 - $(window).width(),
        opacity: 1
    }).show().animate({
        'margin-left': 0,
        opacity: 1,
    }, 1000, "easeInOutExpo");

    if (id == "#team") {
        $('#members-tab').css({
            'margin-left': $(window).width()
        }).show().animate({
            'margin-left': 0
        }, 1000, "easeInOutExpo").find('.tab').show();

    }

    setFooterY();
}

function setFooterY() {
    var h = tab.height() + 150 + 0;

    if (tab.attr('id') == "team-tab") {
        $('#members-tab').height($('#members-tab').find('.page').height() + 0);
        h += $('#members-tab').height() - 0;
    }

    $('#content').height(h);
    $('#vignettage').height(0 + h);
}

if ($('.nav').length > 0 && $('#news-page').length == 0) {
    $('.nav').on('click', 'a', function (e) {
        e.preventDefault();
        showTab($(e.target).attr('href'));

    });

    if (window.location.hash != "") {
        showTab(window.location.hash);
    } else {
        showTab(defaultTab);
    }

    $(document).ready(function () {
        setTimeout(setFooterY, 500);
    });
}

---

添加要显示的div是否已可见且不设置动画的验证：

...

if ($('.nav').length > 0 && $('#news-page').length == 0) {
    $('.nav').on('click', 'a', function (e) {
        e.preventDefault();
       if(!$(''+$(e.target).attr('href')+'-tab').is(':visible')){
        showTab($(e.target).attr('href'));
       }

});

...

---

我可以在您的代码中看到您将class=current分配给所选选项卡。可以使用此类禁用当前锚的onclick

$('.current a').click(function(e) {
e.preventDefault();
});

---

我认为，在设置showTab函数中任何内容的动画之前，应该先检查showTab函数中的lasttab和tab变量

showTab的代码如下，请检查标有//changed in的更改

function showTab(id) {
  id = id.replace("-tab", "");
  //window.location.hash = id;

  if (tab) {
    direction = (tab.attr('data-index') < $(id + "-tab").attr('data-index')) ? "rtl" : "ltr";
    lasttab = tab;
    lasttab.animate({
        'margin-left': (direction == "rtl") ? -0 - $(window).width() : -0 + $(window).width(),
        opacity: 1
    }, 1000, "easeInOutExpo", function () {
        $(this).hide();
    });

    if (tab.attr('id') == "team-tab") {
        $('#members-tab').animate({
            'margin-left': $(window).width(),
            opacity: 1
        }, 1000, "easeInOutExpo", function () {
            $(this).hide();
            $(this).unbind('click');
        });
    }
  }


  $('.nav').find('.current').removeClass('current');
  $('a[href="' + id + '"]').parent().addClass('current').prev().css('');

  tab = $(id + "-tab");
  if (lasttab !== tab) { //changed
    tab.css({
     'margin-left': (direction == "rtl") ? -0 + $(window).width() : -0 - $(window).width(),
     opacity: 1
     }).show().animate({
     'margin-left': 0,
     opacity: 1,
    }, 1000, "easeInOutExpo");
  }

  if (id == "#team") {
    $('#members-tab').css({
        'margin-left': $(window).width()
    }).show().animate({
        'margin-left': 0
    }, 1000, "easeInOutExpo").find('.tab').show();

  }

  setFooterY();
}

---

你能举个例子吗？这是更新答案的链接。你能给我完整的代码吗。你最好帮忙。感谢高级。使用上面的代码，只需将我的代码片段添加到行：“if$'.nav.”length>0&&$'news-page'。length==0{$'.nav'。单击“a”，函数e{'..我只添加了一个“如果”条件，以防止触发“showTab”功能，如果锚指向的div已被访问，请修改答案，再试一次。mazhar：问题是什么？你能给我一个完整的编辑代码吗？我当前的类在li上，因此无法工作让我为你上传。请看这里。调整浏览器的大小to获取iphone分辨率。如果你这样做，浏览器右侧会出现一个samlll菜单。当你单击菜单时，它将切换我的菜单。就像响应式设计现在有一个菜单。我想要的是，当用户客户端在任何链接上的内容动画到特定部分时，菜单也会折叠。如果你有任何问题，请告诉我关于这一点，你能不能单独问一个问题，因为这与最初的问题不同，所以你会从像我这样的开发人员那里得到更好的回答？

    var tab, lasttab;
var defaultTab = '#profile-tab';
var direction = "rtl"; // Right To Left

$('.tab').hide();

function showTab(id) {
    id = id.replace("-tab", "");
    //window.location.hash = id;

    if (tab) {
        direction = (tab.attr('data-index') < $(id + "-tab").attr('data-index')) ? "rtl" : "ltr";
        lasttab = tab;
        lasttab.animate({
            'margin-left': (direction == "rtl") ? -0 - $(window).width() : -0 + $(window).width(),
            opacity: 1
        }, 1000, "easeInOutExpo", function () {
            $(this).hide();
        });

        if (tab.attr('id') == "team-tab") {
            $('#members-tab').animate({
                'margin-left': $(window).width(),
                opacity: 1
            }, 1000, "easeInOutExpo", function () {
                $(this).hide();
                $(this).unbind('click');
            });
        }
    }


    $('.nav').find('.current').removeClass('current');
    $('a[href="' + id + '"]').parent().addClass('current').prev().css('');

    tab = $(id + "-tab");
    tab.css({
        'margin-left': (direction == "rtl") ? -0 + $(window).width() : -0 - $(window).width(),
        opacity: 1
    }).show().animate({
        'margin-left': 0,
        opacity: 1,
    }, 1000, "easeInOutExpo");

    if (id == "#team") {
        $('#members-tab').css({
            'margin-left': $(window).width()
        }).show().animate({
            'margin-left': 0
        }, 1000, "easeInOutExpo").find('.tab').show();

    }

    setFooterY();
}

function setFooterY() {
    var h = tab.height() + 150 + 0;

    if (tab.attr('id') == "team-tab") {
        $('#members-tab').height($('#members-tab').find('.page').height() + 0);
        h += $('#members-tab').height() - 0;
    }

    $('#content').height(h);
    $('#vignettage').height(0 + h);
}

if ($('.nav').length > 0 && $('#news-page').length == 0) {
    $('.nav').on('click', 'a', function (e) {
        e.preventDefault();
        var clickedAnchor = $(e.target);
        if (!clickedAnchor.parent().hasClass('current')) {
            showTab(clickedAnchor.attr('href'));
        }

    });

    if (window.location.hash != "") {
        showTab(window.location.hash);
    } else {
        showTab(defaultTab);
    }

    $(document).ready(function () {
        setTimeout(setFooterY, 500);
    });
}