当前位置：首页 > jquery

jquery 选项卡

2026-02-03 09:33:15jquery

jQuery 选项卡实现方法

jQuery 选项卡可以通过多种方式实现，以下是几种常见的方法：

方法一：基础 jQuery 实现

通过 jQuery 选择器和事件处理函数创建选项卡功能。

$(document).ready(function(){
  $('.tab-content').hide();
  $('.tab-content:first').show();

  $('.tab-nav li').click(function(){
    $('.tab-content').hide();
    var activeTab = $(this).find('a').attr('href');
    $(activeTab).fadeIn();
    return false;
  });
});

对应的 HTML 结构：

<ul class="tab-nav">
  <li><a href="#tab1">选项卡1</a></li>
  <li><a href="#tab2">选项卡2</a></li>
</ul>

<div id="tab1" class="tab-content">
  内容1
</div>
<div id="tab2" class="tab-content">
  内容2
</div>

方法二：使用 jQuery UI 的 Tabs 组件

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

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

HTML 结构：

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">选项卡1</a></li>
    <li><a href="#tabs-2">选项卡2</a></li>
  </ul>
  <div id="tabs-1">内容1</div>
  <div id="tabs-2">内容2</div>
</div>

方法三：带切换效果的选项卡

实现带淡入淡出效果的选项卡。

$('.tab-nav a').click(function(e) {
  e.preventDefault();
  $('.tab-content').stop().fadeOut(300);
  $($(this).attr('href')).stop().fadeIn(300);
});

CSS 样式建议

.tab-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-nav li {
  display: inline-block;
}
.tab-nav a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
}
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
}
.active-tab {
  background: #f5f5f5;
}

注意事项