jquery实现tab选项卡切换

可以用以下代码实现基本的Tab选项卡切换：

HTML代码：

<div class="tab">
  <ul class="tab-menu">
    <li class="active"><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab-1" class="tab-panel active">This is tab 1 content.</div>
    <div id="tab-2" class="tab-panel">This is tab 2 content.</div>
    <div id="tab-3" class="tab-panel">This is tab 3 content.</div>
  </div>
</div>

CSS代码：

.tab-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.tab-menu li {
  margin-right: 10px;
}

.tab-menu li a {
  display: block;
  padding: 10px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
}

.tab-menu li.active a {
  background-color: #333;
  color: #fff;
}

.tab-panel {
  display: none;
  padding: 10px;
}

.tab-panel.active {
  display: block;
}

jQuery代码：

$(document).ready(function() {
  // 初始状态下，显示第一个选项卡
  $('.tab-menu li:first').addClass('active');
  $('.tab-panel:first').addClass('active');

  // 点击选项卡时，切换显示内容
  $('.tab-menu li').click(function() {
    var tab_id = $(this).find('a').attr('href');

    $('.tab-menu li').removeClass('active');
    $('.tab-panel').removeClass('active');

    $(this).addClass('active');
    $(tab_id).addClass('active');
  });
});

当用户点击选项卡时，通过jQuery代码来切换显示内容。首先，我们在页面加载完成后，将第一个选项卡及其内容设为初始状态下的激活状态。然后，我们通过jQuery的click()方法来监控选项卡的点击事件。当用户点击某个选项卡时，我们将该选项卡及其对应的内容设为激活状态，同时将其他选项卡及其对应的内容设为非激活状态。