jq实现tab选项卡切换

以下是一个简单的例子，使用jq实现tab选项卡切换：

HTML代码：

<div class="tab">
  <ul class="tab-menu">
    <li class="active">Tab1</li>
    <li>Tab2</li>
    <li>Tab3</li>
  </ul>
  <div class="tab-content">
    <div class="tab-panel active">
      <p>Tab1 content goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Tab2 content goes here.</p>
    </div>
    <div class="tab-panel">
      <p>Tab3 content goes here.</p>
    </div>
  </div>
</div>

CSS代码：

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

.tab-menu li {
  padding: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-bottom: none;
}

.tab-menu li.active {
  background-color: #f9f9f9;
  border-color: #ccc;
}

.tab-panel {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
}

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

jQuery代码：

$(function() {
  // 初始化，显示第一个tab
  $('.tab-panel').first().addClass('active');
  
  // 点击切换tab
  $('.tab-menu li').on('click', function() {
    // 切换选中状态
    $(this).addClass('active').siblings().removeClass('active');
    
    // 切换对应的内容
    var index = $(this).index();
    $('.tab-panel').eq(index).addClass('active').siblings().removeClass('active');
  });
});

实现效果：