当前位置：首页 > jquery

jquery 选项卡

2026-04-08 02:39:22jquery

jQuery 选项卡实现方法

使用 jQuery 实现选项卡功能可以通过多种方式完成，以下是常见的实现方法。

基础 HTML 结构

<div class="tabs">
  <ul class="tab-nav">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1">Content 1</div>
    <div id="tab2">Content 2</div>
    <div id="tab3">Content 3</div>
  </div>
</div>

CSS 样式

.tab-content > div {
  display: none;
}
.tab-content > div.active {
  display: block;
}
.tab-nav li.active a {
  font-weight: bold;
  color: #007bff;
}

jQuery 实现代码

$(document).ready(function() {
  // 默认显示第一个选项卡
  $('.tab-nav li:first').addClass('active');
  $('.tab-content div:first').addClass('active');

  // 点击切换选项卡
  $('.tab-nav a').click(function(e) {
    e.preventDefault();

    // 移除所有活动状态
    $('.tab-nav li').removeClass('active');
    $('.tab-content div').removeClass('active');

    // 添加当前活动状态
    $(this).parent().addClass('active');
    $($(this).attr('href')).addClass('active');
  });
});

使用 jQuery UI 实现

jQuery UI 提供了更完善的选项卡组件，可以简化开发。

HTML 结构

<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">Content 1</div>
  <div id="tabs-2">Content 2</div>
  <div id="tabs-3">Content 3</div>
</div>

jQuery UI 代码

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

注意事项

确保在页面中正确引入 jQuery 和 jQuery UI 库：

jquery 选项卡

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

选项卡功能可以根据需求进行扩展，如添加动画效果、AJAX 加载内容等。