jquery实现侧面tab栏图片切换

jQuery 实现侧面 Tab 栏图片切换通常涉及以下几个步骤：

1. **HTML 结构**：
创建一个包含多个侧边栏选项（比如 `<div>` 元素，每个代表一个 tab），以及它们对应的图片容器（如 `img` 或者 `figure`）。

<div class="tab-container">
  <ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <!-- 添加更多 tabs -->
  </ul>
  <div class="tab-content">
    <figure id="tab1"><img src="image1.jpg"></figure>
    <figure id="tab2"><img src="image2.jpg"></figure>
    <!-- 更多内容区域 -->
  </div>
</div>

2. **jQuery 选择器**：
使用 jQuery 选择 `.tabs a` 作为点击事件的目标，选择 `.tab-content figure img` 来操作图片。

3. **JavaScript 动作**：
钩定 `.tabs a` 的点击事件，当用户点击不同的 tab 时，隐藏当前显示的内容，显示相应选中的图片。

$(document).ready(function() {
  $('.tabs a').click(function(e) {
    e.preventDefault(); // 阻止默认链接跳转

    var target = $(this).attr('href');
    $('.tab-content figure').hide();
    $('figure#' + target).show();

    // 切换样式，例如添加或移除激活状态
    $(this).parent().addClass('active');
    $('.tabs a').not(this).parent().removeClass('active');
  });
});

4. **CSS 样式**：
定义 `.tab-content figure` 的初始隐藏状态和激活后的展示状态，以及 `.active` 类的样式效果。

.tab-content figure {
  display: none;
}

.active figure {
  display: block;
}