如何在Jquery上启用Tab

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<ul class="tab-menu">
  <li class="active">Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

<div class="tab-content">
  <div class="tab-pane active">Content 1</div>
  <div class="tab-pane">Content 2</div>
  <div class="tab-pane">Content 3</div>
</div>

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

.tab-menu li {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

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

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

.tab-content .tab-pane.active {
  display: block;
}

$(document).ready(function() {
  // 默认显示第一个选项卡
  $('.tab-menu li:first').addClass('active');
  $('.tab-content .tab-pane:first').addClass('active');

  // 点击选项卡标题切换内容
  $('.tab-menu li').click(function() {
    var tabIndex = $(this).index();

    // 切换选项卡标题的样式
    $('.tab-menu li').removeClass('active');
    $(this).addClass('active');

    // 切换选项卡内容的显示
    $('.tab-content .tab-pane').removeClass('active');
    $('.tab-content .tab-pane').eq(tabIndex).addClass('active');
  });
});