Динамическое изменение страниц при клике в том же виде

Question

Я создаю клон Spotify более-менее. В настоящее время я хочу сделать событие клика по элементам диапазона меню, которое при клике покажет контейнеру страницу, где будет виден некоторый контент. На своей боковой панели я добавил диапазон со страницами для указания и добавил в HTML страницы с data-page в качестве якоря для этого. Я также делаю событие jquery.

Что я сделал в отношении Jquery:

$(".menu .sb-item span").on("click", function(e) {
    e.preventDefault();
    var page = $(this).data("page");
    $(".main .page:not('.hide')")
      .stop()
      .fadeOut("fast", function() {
        $(this).addClass("hide");
        $('.main .page[data-page="' + page + '"]')
          .fadeIn("slow")
          .removeClass("hide");
      });
  });

У меня упрощенная рабочая версия здесь того, что я хочудостижения на JSFiddle.

Нажав на промежуток, вы увидите изменения страниц.

Теперь моя проблема в том, что на моей странице, где я реализовал, это вообще не работает Страница моего примера

На консоли, нажимающей на диапазон, у меня появляется следующая ошибка:

Uncaught TypeError: $(...).stop is not a function

Я не могу решить эту проблему, так как в JSFiddle она работает, поэтому я не могу понять, почему ее нет на моей странице.

Answer 1

Я согласен с Taplar, если вы хотите уменьшенную версию, я изменил некоторые модификации

$(function(){
        $(".menu .sb-item span").on("click", function(e) {
    e.preventDefault();
    var page = $(this).data("page");
    $(".main").find('#'+page).fadeIn("slow").siblings().fadeOut("fast");
});    
    })