Question

我使用Jquery创建了一个简单的选项卡面板，除了单击活动选项卡上的面板开始更改并且我不知道如何修复它之外，它工作正常。我想要它，以便在点击活动标签时没有任何反应。

由于

codepen：http://codepen.io/MarkShakespeare/pen/qERMZo

HTML：

<div id="tab-panel">
  <ul class="tabs">
    <li data-panel-id = "panel1" class ="active">Panel 1</li>
    <li data-panel-id = "panel2">panel 2</li>
    <li data-panel-id = "panel3">panel 3</li>
    <li data-panel-id ="panel4">panel 4</li>  
  </ul>

<div id="panel1" class ="active-panel">
  content 1 <br/>
  content <br/>
  content <br/>
  content <br/>
  content <br/> 
</div>
<div id="panel2" class ="panel">
  content 2 <br/>
  content <br/>
  content <br/>
  content <br/>
  content <br/> 
</div> 
<div id="panel3" class ="panel">
  content 3 <br/>
  content <br/>
  content <br/>
  content <br/>
  content <br/> 
</div>
<div id="panel4" class ="panel">
  content 4 <br/>
  content <br/>
  content <br/>
  content <br/>
  content <br/> 
</div>

</div>

css：

#tab-panel ul {
  display: block;
}

#tab-panel ul li {
  display: inline;
  background: pink;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
}

#tab-panel ul li:hover {
  background-color: red;
}

#tab-panel .tabs li.active {
  background-color: red;
}

#tab-panel .panel {
  background-color: lightblue;
  padding: 10px;
  display: none;

}

.active-panel {
  display: block;
  background-color: lightblue;
  padding: 10px;
}

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');
  });
});

Answer 1

您可以使用以下逻辑：

$('#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');
  });
});

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

1 个答案:

-DEMO-