jQuery标签页

实现可切换的选项卡界面，点击不同标签显示对应内容面板。 · 难度：入门 · +15XP

jQuery标签页

标签页（Tabs）是一种常见的导航模式，用户通过点击标签切换不同内容区域，适合组织大量信息。

实现原理

每个标签对应一个内容面板，通过data-target属性关联。点击标签时，隐藏所有面板，显示目标面板，并给当前标签添加激活样式。

核心代码

$('.tab').click(function() {
  var target = $(this).data('target');
  $('.tab').removeClass('active');
  $(this).addClass('active');
  $('.panel').hide();
  $(target).show();
});

常见问题

练习提示

在右侧代码中，默认显示第二个标签页，并添加一个淡入效果。