Jquery选项卡面板-防止活动选项卡移动

我使用Jquery制作了一个简单的选项卡面板，它工作正常，除了当您单击活动选项卡时面板开始改变，我不知道如何修复它。我希望这样，当点击活动选项卡时，不会发生任何事情

谢谢

代码笔：

html:

jQuery：

$('#tab-panel .tabs li').on('click', function() {
  var $panelToShow = $(this).attr('data-panel-id');
  var $activePanel = $('#tab-panel .tabs li.active');

  $($activePanel).removeClass('active');
  $(this).addClass('active');
    $('#tab-panel .active-panel').slideUp(300);
  $('#' + $panelToShow).slideDown(300, function() {
    $(this).addClass('active-panel');
  });
});

---

您可以使用以下逻辑：

$('#tab-panel .tabs').on('click', 'li:not(.active)', function() {
  var panelToShow = $(this).data('panelId');
  var $activePanel = $('#tab-panel .tabs li.active');      
  $(this).add($activePanel).toggleClass('active');
   $('#tab-panel .active-panel').slideUp(300);
  $('#' + panelToShow).slideDown(300, function() {
    $(this).addClass('active-panel');
  });
});

$('#tab-panel .tabs li').on('click', function() {
  var $panelToShow = $(this).attr('data-panel-id');
  var $activePanel = $('#tab-panel .tabs li.active');

  $($activePanel).removeClass('active');
  $(this).addClass('active');
    $('#tab-panel .active-panel').slideUp(300);
  $('#' + $panelToShow).slideDown(300, function() {
    $(this).addClass('active-panel');
  });
});

$('#tab-panel .tabs').on('click', 'li:not(.active)', function() {
  var panelToShow = $(this).data('panelId');
  var $activePanel = $('#tab-panel .tabs li.active');      
  $(this).add($activePanel).toggleClass('active');
   $('#tab-panel .active-panel').slideUp(300);
  $('#' + panelToShow).slideDown(300, function() {
    $(this).addClass('active-panel');
  });
});