526互联

点击其他地方移除active 缩起tab选项卡

发布时间 2023-04-11 17:12:23作者: IT丶Hatcher
HTML:

html
<div class="tab-group">
  <div class="tab">选项卡1</div>
  <div class="tab-content">选项卡1的内容</div>
  <div class="tab">选项卡2</div>
  <div class="tab-content">选项卡2的内容</div>
  <div class="tab">选项卡3</div>
  <div class="tab-content">选项卡3的内容</div>
</div>
CSS:

css
.tab-content {
  height: 0;
  overflow: hidden;
}

.tab-content.active {
  height: auto;
}
JavaScript:

javascript
$('.tab').on('click', function() {
  var $target = $(this).next('.tab-content');
  $('.tab-content').not($target).removeClass('active');
  $target.toggleClass('active');
});

$(document).on('click', function(e) {
  var $target = $(e.target);
  if (!$target.is('.tab') && !$('.tab').has($target).length) {
    $('.tab-content').removeClass('active');
  }
});