jquery 动态生成tab选项卡切换内容

可以使用以下代码实现：

HTML 代码：

<div class="tab-container">
  <ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div id="tab1" class="tab-content">Tab 1 content</div>
  <div id="tab2" class="tab-content">Tab 2 content</div>
  <div id="tab3" class="tab-content">Tab 3 content</div>
</div>

CSS 代码：

.tab-container .tabs li {
  display: inline-block;
  margin-right: 10px;
}

.tab-container .tab-content {
  display: none;
}

jQuery 代码：

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

  // 点击选项卡切换内容
  $('.tabs a').click(function(e) {
    e.preventDefault();
    var tabId = $(this).attr('href');
    $('.tab-content').hide();
    $(tabId).show();
  });
});

说明：

1. 首先，我们将选项卡的链接指向对应的内容区域的 ID，这样点击选项卡时就可以切换显示对应的内容。
2. 使用 CSS 隐藏所有内容区域。
3. 在 jQuery 中，首先默认显示第一个选项卡的内容。
4. 点击选项卡时，获取对应的内容区域的 ID，并将所有内容区域隐藏，然后显示对应的内容区域。