Вкладка JQuery не работает

Question

Я изучаю jquery, и я пытаюсь сделать вкладку. я не могу понять, почему это не работает

Вот у меня есть HTML

<div class="tab-panels"> 
    <ul class="tabs"> 
     <li rel="panel1"class="active">All</li> 
     <li rel="panel2">Animals</li> 
     <li rel="panel3">People</li> 
     <li rel="panel4">Landscape</li> 
    </ul> 
    <div id="panel1" class="panel active"> 
     <img src="images/tab1.jpg"/> 
     <img src="images/tab2.jpg"/> 
    </div> 
    <div id="panel2" class="panel"> 
     <img src="images/tab3.jpg"/> 
     <img src="images/tab4.jpg"/> 
    </div> 
    <div id="panel3" class="panel"> 
     <img src="images/tab5.jpg"/> 
     <img src="images/tab6.jpg"/> 
    </div> 
    <div id="panel4" class="panel"> 
     <img src="images/tab7.jpg"/> 
     <img src="images/tab8.jpg"/> 
    </div> 
</div> 

А вот мой JQuery

$(function(){ 
    $('.tab-panels .tabs li').on('click', function({ 
     var $panel = $(this).closest('.tab-panels'); 
     $panel.find('.tabs li.active').removeClass('active'); 
     $(this).addClass('active'); 

     var panelToShow = $(this).attr('rel'); 

     $panel.find('.panel.active').show(300, showNextPanel); 

      function showNextPanel(){ 
      $(this).removeClass('active'); 

      $('#'+panelToShow).slideDown(300, function(){ 
       $(this).addClass('active'); 
      }); 
     }); 
    })); 

Я сделал этот код из видео, которое я наблюдал , для этого человека код работал отлично, поэтому я не понимаю, почему он не работает для меня.

Answer 1

синтаксических ошибок при .on('click', function({, близких из js});}));

попытаться вызвать .hide() на .panel перед отображением .panel.active; заменить .slideDown() для .show()

$(function(){ 
    $(".tab-panels .tabs li").on("click", function(e) { 
     $(this).siblings().add(".panel").removeClass("active"); 
     $(".panel").hide(); 
     $(this).addClass("active"); 

     var panelToShow = $(this).attr("rel"); 

     $("#" + panelToShow).addClass("active") 
     .slideDown(300); 
    }) 
}); 

jsfiddle http://jsfiddle.net/nLu4Lpoy/

Answer 2

Вы забыли инициализировать его

попробовать, как этот

$(function() { 
    $(".tab-panels").tabs(); 
}); 

Answer 3

Кажись, как вы опечатка код (если у вас есть рабочий код CSS для укладки). См показатели ниже:

$(function() { 
$('.tab-panels .tabs li').on('click', function() { //<------ here 
    var $panel = $(this).closest('.tab-panels'); 
    $panel.find('.tabs li.active').removeClass('active'); 
    $(this).addClass('active'); 

    var panelToShow = $(this).attr('rel'); 

    $panel.find('.panel.active').show(300, showNextPanel); 

    function showNextPanel() { 
     $(this).removeClass('active'); 

     $('#' + panelToShow).slideDown(300, function() { 
      $(this).addClass('active'); 
     }); 
    } //<------ here 
    }); 
}); //<------ here(must close dom ready function) 

Answer 4

Вы были Синтаксические ошибки в Jquery, попробуйте следующее:

$(function(){ 
    $('.tab-panels .tabs li').on('click', function(e){ 

     var $panel = $(this).closest('.tab-panels'); 
     $panel.find('.tabs li.active').removeClass('active'); 
     $(this).addClass('active'); 

     var panelToShow = $(this).attr('rel'); 

     $panel.find('.panel.active').show(300, showNextPanel); 

     function showNextPanel(){ 
      $(this).removeClass('active'); 

      $('#'+panelToShow).slideDown(300, function(){ 
       $(this).addClass('active'); 
      }); 
     }; 
    }); 
}); 

Quick JS Fiddle

Ваша первая функция нажмите не настроена правильно и до конца не было закрыто право. Обычно вы можете решить что-то вроде этого легче, сохраняя функции разнесены хорошо, группировать переменные, и т.д ..