如何利用 jQuery 实现 tab 切换功能并实现代码复用？

jQuery 提供了方便的方式来实现 Tab 切换的功能，通常我们会通过数据绑定和事件处理结合起来。以下是一个简单的步骤：

1. 首先，确保页面上存在多个有切换效果的元素，比如 `<div>` 标签，每个标签对应一个 Tab 页面。

<ul id="tabNav">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <!-- 添加更多的 tab links -->
</ul>

<div id="tabContent">
  <div id="tab1" class="tabPanel active">内容 1</div>
  <div id="tab2" class="tabPanel">内容 2</div>
  <!-- 添加更多的 tab panels -->
</div>

2. 使用 jQuery 选择器获取 `tabNav` 和对应的 `tabPanel` 区域，并给它们绑定点击事件。

$(document).ready(function() {
  $('#tabNav a').on('click', function(event) {
    // 阻止默认链接跳转
    event.preventDefault();

    // 获取当前激活的面板和点击的链接
    var $activeTab = $('#tabContent .active');
    var $clickedTab = $(this);

    // 关闭当前激活的面板
    $activeTab.removeClass('active');

    // 将点击的链接关联的面板设置为活跃状态
    var targetId = $clickedTab.attr('href').substring(1); // 去掉 '#' 字符
    $('#' + targetId).addClass('active');

    // 移动滚动条到相应的区域
    $('html, body').animate({
      scrollTop: $("#" + targetId).offset().top
    }, 500);
  });
});

在这个例子中，当用户点击一个 Tab 项时，对应的 Tab 内容会显示出来，其他 Tab 的内容会隐藏。同时，点击后的 Tab 项会添加 `.active` 类，表示它现在是活动的。