当前位置：首页 > jquery

jquery选项卡

2026-02-03 09:31:48jquery

jQuery选项卡实现方法

jQuery选项卡是一种常见的UI组件，允许用户通过点击不同标签切换内容显示。以下是几种常见的实现方式：

基础HTML结构

<div class="tab-container">
  <ul class="tab-nav">
    <li class="active">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
  </ul>

  <div class="tab-content">
    <div class="active">内容1</div>
    <div>内容2</div>
    <div>内容3</div>
  </div>
</div>

方法1：基本点击切换

jquery选项卡

$('.tab-nav li').click(function(){
  // 获取点击索引
  var index = $(this).index();

  // 切换导航激活状态
  $(this).addClass('active').siblings().removeClass('active');

  // 切换对应内容
  $('.tab-content div').eq(index).addClass('active')
    .siblings().removeClass('active');
});

方法2：使用data属性关联 HTML中添加data属性：

<ul class="tab-nav">
  <li data-tab="tab1" class="active">标签1</li>
  ...
</ul>

<div class="tab-content">
  <div id="tab1" class="active">内容1</div>
  ...
</div>

jQuery代码：

jquery选项卡

$('.tab-nav li').click(function(){
  var tabId = $(this).data('tab');

  $(this).addClass('active').siblings().removeClass('active');
  $('#' + tabId).addClass('active')
    .siblings('.tab-content div').removeClass('active');
});

方法3：添加过渡动画

$('.tab-nav li').click(function(){
  var index = $(this).index();

  $(this).addClass('active').siblings().removeClass('active');

  $('.tab-content div').removeClass('active')
    .eq(index).fadeIn(300).addClass('active');
});

CSS样式建议

.tab-nav li {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}
.tab-nav li.active {
  background: #3498db;
  color: white;
}
.tab-content div {
  display: none;
  padding: 20px;
}
.tab-content div.active {
  display: block;
}

注意事项