jQuery实现复杂样式选项卡

你可以使用jQuery来实现复杂样式的选项卡。下面是一个简单的示例：

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-pane active">Content 1</div>
    <div class="tab-pane">Content 2</div>
    <div class="tab-pane">Content 3</div>
  </div>
</div>

CSS样式：

.tab-container {
  width: 400px;
}

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

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

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

.tab-pane {
  display: none;
  padding: 10px;
  background-color: #f0f0f0;
}

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

jQuery代码：

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

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

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

    // 切换内容
    $('.tab-pane').removeClass('active');
    $('.tab-pane').eq(index).addClass('active');
  });
});

以上代码实现了一个简单的选项卡功能，点击不同的选项卡会切换对应的内容和样式。你可以根据自己的需求进行修改和扩展。