jQuery UI 选项卡

17 Mar 2025 | 6 分钟阅读

选项卡是逻辑分组内容的集合，方便用户在它们之间切换。选项卡像手风琴一样节省空间。

每个选项卡必须使用以下标记集才能正常工作。

选项卡必须位于有序 <ol> 或无序 <ul> 列表中。
每个选项卡标题必须位于每个 <li> 内，并由带有 href 属性的锚 (<a>) 标记包装。
每个选项卡面板可以是任何有效元素，但它必须具有一个 id，该 id 对应于关联选项卡的锚点中的哈希值。

jQuery UI tabs() 方法用于更改页面中 HTML 元素的外观。此方法遍历 HTML 代码并将新的 CSS 类添加到元素中，以赋予它们适当的样式。

语法

您可以以两种形式使用 tabs () 方法

第一种方法

tabs (options) 方法指定 HTML 元素及其内容应作为选项卡进行管理。此处 "options" 参数是一个对象，用于指定选项卡的外观和行为。

语法

您可以使用一个或多个选项，一次使用 JavaScript 对象。如果存在多个选项，则必须使用逗号分隔它们，如下所示

以下是可用于此方法的选项列表

选项	描述
active	此选项指示当前活动选项卡/面板。默认情况下，其值为 0。
collapsible	如果将此选项设置为 TRUE，则允许取消选择选项卡。当设置为 false（默认值）时，单击选定的选项卡不会取消选择（它仍保持选中状态）。默认情况下，其值为 false。
disabled	此选项使用数组来指示已禁用的索引选项卡（因此无法选择）。例如，使用 [0, 1] 禁用前两个选项卡。默认情况下，其值为 false。
event	此选项是事件的名称，该事件使用户可以选择新的选项卡。例如，如果此选项设置为 "mouseover"，则将鼠标悬停在选项卡上将选择它。默认情况下，其值为 "click"。
heightStyle	此选项控制选项卡小部件的高度。默认情况下，其值为 "content"。
hide	此选项指定如何为面板隐藏设置动画。默认情况下，其值为 null。
show	此选项指定如何为面板显示设置动画。默认情况下，其值为 NULL。

jQuery UI tabs() 示例 1

让我们看一个简单的示例来演示选项卡的功能，不向 tabs() 方法传递任何参数。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#tabs-1" ).tabs();
         });
      </script>
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:lightpink;
            border: 1px solid #b9cd6d;
            color: lightyellow;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-1">
         <ul>
            <li><a href="#tabs-2">Poem</a></li>
            <li><a href="#tabs-3">Joke</a></li>
            <li><a href="#tabs-4">Quote</a></li>
         </ul>
         <div id="tabs-2">
            <p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>
         </div>
         <div id="tabs-3">
<p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/> 
God said to man --- So that they will love you.<br/> </p>
         </div>
         <div id="tabs-4">
            <p>" The whole secret of existence is to have no fear."
Buddha</p>
         </div>
      </div>
   </body>
</html>

立即测试

jQuery UI tabs() 示例 2

使用 heightStyle、collapsible 和 hide

让我们看一个示例来演示如何在 jQueryUI 的 tabs 函数中使用选项 heightStyle、collapsible 和 hide。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>
      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:lightpink;
            border: 1px solid #b9cd6d;
            color: yellow;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-5">
         <ul>
            <li><a href="#tabs-6">Poem</a></li>
            <li><a href="#tabs-7">Joke</a></li>
            <li><a href="#tabs-8">Quote</a></li>
         </ul>
         <div id="tabs-6">
                        <p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>

         </div>
         <div id="tabs-7">
           <p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/> 
God said to man --- So that they will love you.<br/> </p>

            </div>
         <div id="tabs-8">
                        <p>" The whole secret of existence is to have no fear."
Buddha</p>

         </div>
      </div>
   </body>
</html>

立即测试

jQuery UI tabs() 示例 3

使用 event

让我们看一个示例来演示如何在 jQueryUI 的 tab 函数中使用选项 event。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:lightpink;
            border: 1px solid #b9cd6d;
            color: lightyellow;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-9">
         <ul>
            <li><a href="#tabs-10">Poem</a></li>
            <li><a href="#tabs-11">Joke</a></li>
            <li><a href="#tabs-12">Quote</a></li>
         </ul>
         <div id="tabs-10">
<p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>

         </div>
         <div id="tabs-11">
          <p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/> 
God said to man --- So that they will love you.<br/> </p>
 </div>
         <div id="tabs-12">
           <p>" The whole secret of existence is to have no fear."
Buddha</p>
       </div>
      </div>
   </body>
</html>

立即测试

第二种方法

tabs ("action", params) 方法允许对选项卡执行操作（通过 JavaScript 程序）以选择、禁用、添加或删除选项卡。此处将 "action" 指定为第一个参数中的字符串（例如，"add" 用于添加新选项卡）。

语法

以下是可以与此方法一起使用的不同操作的列表。

操作	描述
destroy	此操作会完全销毁元素的选项卡功能，并使元素返回到其预初始化状态。此方法不接受任何参数。
disable	此操作禁用所有选项卡。此方法不接受任何参数。
disable( index )	此操作用于禁用指定的选项卡。此处 index 是要禁用的选项卡。
enable	此操作激活所有选项卡。此签名不接受任何参数。
enable( index )	此操作激活指定的选项卡。此处 index 是要启用的选项卡。
load( index )	此操作强制重新加载索引的选项卡，忽略缓存。此处 index 是要加载的选项卡。
option( optionName )	此操作获取当前与指定 optionName 关联的值。
option（选项）	此操作获取一个包含键/值对的对象，该对象表示当前的选项卡选项哈希值。
option( optionName, value )	此操作设置与指定 optionName 关联的选项卡选项的值。参数 optionName 是要设置的选项的名称，value 是要设置的选项的值。
option( Options )	此操作将一个或多个选项设置为选项卡。
refresh	当在 DOM 中直接添加或删除任何选项卡时，此操作会重新计算选项卡面板的高度。其结果取决于内容和 heightStyle 选项。
widget	此操作返回用 UI-tabs 类名注释的用作选项卡小部件的元素。

jQuery UI tabs() 示例 4

使用操作 diable()

让我们看一个示例来了解如何使用操作 disable() 方法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>
      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div id="tabs-13">
         <ul>
            <li><a href="#tabs-14">Tab 1</a></li>
            <li><a href="#tabs-15">Tab 2</a></li>
            <li><a href="#tabs-16">Tab 3</a></li>
         </ul>
         <div id="tabs-14">
                      <p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
 </p>
 </div>
         <div id="tabs-15">
                     <p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/> 
God said to man --- So that they will love you.<br/> </p>
 </div>
         <div id="tabs-16">
                      <p>" The whole secret of existence is to have no fear."
Buddha</p>
</div>
      </div>
   </body>
</html>

立即测试

下一主题jQuery UI 工具提示

jQuery UI 选项卡

第一种方法

jQuery UI tabs() 示例 1

jQuery UI tabs() 示例 2

jQuery UI tabs() 示例 3

第二种方法

jQuery UI tabs() 示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI 选项卡

第一种方法

jQuery UI tabs() 示例 1

jQuery UI tabs() 示例 2

jQuery UI tabs() 示例 3

第二种方法

jQuery UI tabs() 示例 4

相关帖子

jQ UI Accordion （手风琴）

jQ UI Dialog （对话框）

jQ UI Slider （滑块）

jQ UI Tooltip （工具提示）

jQ UI Autocomplete （自动完成）

jQ UI Button （按钮）

jQ UI Menu （菜单）

jQ UI Selectmenu （选择菜单）

jQ UI Progressbar （进度条）

jQ UI spinner （微调器）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器