JQuery stop show/hide on click

Question

У меня есть фрагмент кода, который показывает div, как только вы нажимаете элемент меню, на этом пространстве есть разные divs, и то, что делает меню, скрывает ту, что была там раньше, и показывает новую одна, проблема в том, что когда я нажимаю на тот же элемент меню, он снова показывает текущий div, и я хочу прекратить это из-за этого, он должен показывать анимацию только в том случае, если она не является текущей, если ничего не должно произойти.

Вот фрагмент кода:

var curPage=""; 
$("#menu a").click(function() { 
    if (curPage.length) { 
     $("#"+curPage).hide("slide"); 
    } 
    curPage=$(this).data("page"); 
    $("#"+curPage).show("slide"); 
});  

А вот демонстрация того, как это теперь встречающийся: https://jsfiddle.net/Lfsvc1ta/

Answer 1

Просто добавьте дополнительную проверку, чтобы увидеть curPage ли такой же, как щелкнули странице.

var curPage; 
$("#menu a").click(function() { 
    var page = $(this).data("page"); 
    if (curPage && page != curPage) { 
     $("#" + curPage).stop().hide("slide"); 
    } 
    $("#" + page).stop().show("slide"); 

    curPage = page; 
}); 

Демо: Fiddle

Answer 2

Проверьте, какие данные-страницы щелкнул первый братан.

var curPage=""; 
$("#menu a").click(function() { 
    var newPage = $(this).data("page"); 
    if (newPage !== curPage) { 
     $("#"+curPage).hide("slide"); 
     $("#"+newPage).show("slide"); 
     curPage = newPage; 
    }   
}); 

Answer 3

Вы должны проверить, что было перед страницей, добавив переменную.

var curPage=""; 
$("#menu a").click(function() { 
    var page=$(this).data("page"); 
    if (curPage!=page && curPage.length) { 
     $("#"+curPage).hide("slide"); 
     curPage=$(this).data("page"); 
    } 
    $("#"+curPage).show("slide"); 
}); 

Как эта скрипка https://jsfiddle.net/7b1wh70h/