当前位置：首页 > jquery

jquery tab

2026-03-02 15:00:32jquery

jQuery Tab 实现方法

使用 jQuery 创建选项卡（Tab）功能可以通过多种方式实现，以下是常见的几种方法：

方法一：基础 jQuery 实现

通过切换 CSS 类和显示/隐藏内容实现选项卡功能。

$(document).ready(function() {
  $('.tab-button').click(function() {
    // 移除所有按钮的active类
    $('.tab-button').removeClass('active');
    // 隐藏所有内容
    $('.tab-content').hide();

    // 为当前点击按钮添加active类
    $(this).addClass('active');
    // 显示对应内容
    var tabId = $(this).attr('data-tab');
    $('#' + tabId).show();
  });

  // 默认显示第一个选项卡
  $('.tab-button:first').click();
});

方法二：使用 jQuery UI Tabs

jquery tab

jQuery UI 提供了内置的 Tabs 组件，使用更简单。

$(function() {
  $("#tabs").tabs();
});

对应的 HTML 结构：

jquery tab

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">内容1</div>
  <div id="tabs-2">内容2</div>
  <div id="tabs-3">内容3</div>
</div>

方法三：响应式选项卡

添加响应式特性，适应不同屏幕尺寸。

$(document).ready(function() {
  $('.tab-link').click(function(e) {
    e.preventDefault();
    var currentAttrValue = $(this).attr('href');

    $('.tab-content ' + currentAttrValue).show().siblings().hide();
    $(this).parent('li').addClass('active').siblings().removeClass('active');
  });
});

选项卡样式建议

配合 CSS 可以创建更美观的选项卡界面：

.tab-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.tab-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.tab-button {
  padding: 10px 20px;
  background: #f1f1f1;
  cursor: pointer;
  margin-right: 5px;
}

.tab-button.active {
  background: #4CAF50;
  color: white;
}

.tab-content {
  display: none;
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
}

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