jQuery写一个tab切换

好的，下面是一个简单的jQuery实现的tab切换代码：

HTML代码：

<div class="tab-container">
  <ul class="tab-nav">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="tab-content">
    <div class="tab-panel active">This is tab 1 content.</div>
    <div class="tab-panel">This is tab 2 content.</div>
    <div class="tab-panel">This is tab 3 content.</div>
  </div>
</div>

CSS代码：

.tab-container {
  border: 1px solid #ccc;
  padding: 10px;
}
.tab-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.tab-nav li {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.tab-nav li.active {
  border-bottom: 2px solid #f00;
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

jQuery代码：

$(function() {
  $('.tab-nav li').click(function() {
    var index = $(this).index();
    $(this).addClass('active').siblings().removeClass('active');
    $('.tab-panel').eq(index).addClass('active').siblings().removeClass('active');
  });
});

以上代码实现了一个简单的tab切换功能，点击tab导航时，会切换到对应的内容面板，同时修改当前tab导航的样式。