jQuery实现复杂样式选项卡

jQuery可以很方便地实现复杂样式选项卡。以下是一个简单的示例代码：

HTML部分：

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

CSS部分：

.tab-container {
  width: 400px;
}

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

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

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

.tab-panel {
  display: none;
  padding: 10px;
  background-color: #f9f9f9;
}

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

jQuery部分：

$(document).ready(function() {
  $('.tab-menu li').click(function() {
    // 切换选项卡
    $('.tab-menu li').removeClass('active');
    $(this).addClass('active');
    
    // 切换内容面板
    var tabIndex = $(this).index();
    $('.tab-panel').removeClass('active');
    $('.tab-panel').eq(tabIndex).addClass('active');
  });
});

这段代码实现了一个具有选项卡功能的界面。点击选项卡时，对应的内容面板会显示出来，其他内容面板则隐藏起来。选项卡和内容面板的切换通过添加和移除特定的CSS类来实现。你可以根据自己的需求修改HTML和CSS部分的代码，以及jQuery部分的逻辑来实现更复杂的样式选项卡。