博客

jQuery UI tabs active选项

  • Post category:jquery

以下是关于 jQuery UI tabs active 选项的详细攻略：

jQuery UI tabs active 选项

active 选项允许您设置当前选项卡的引。您可以使用此选项来在页面加载时设置默认选项卡，或在用户与选项卡交互时动态更改选项卡。

语法

$(selector).tabs({
  active: index
});

参数

  • index：要设置为当前选项卡的索引。索引从 0 开始。

示例一：设置默认选项卡

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">选项卡 </a></li>
    <li><a href="#tabs-2">选项卡 2</a></li>
    <li><a href="#tabs-3">选项卡 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>这是选项卡 1 的内容。</p>
  </div>
  <div id="tabs-2">
    <p>这是选项卡 2 的内容。</p>
  </div>
  <div id="tabs-3">
    <p>这是选项卡 3 的内容。</p>
  </div>
</>

<script>
$( "#tabs" ).tabs({
  active: 1 // 将选项卡 2 设置为默认选项卡
});
</script>

这将创建一个选项卡，将选项卡 2 设置为默认选项卡。

示例二：动态更改选项卡

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">选项卡 1</a></li>
    <li><a href="#tabs-2">选项卡 2</a></li>
    <li><a href="#tabs-3">选项卡 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>这是选项卡 1 的内容。</p>
  </div>
  <div id="tabs-2">
    <p>这是选项卡 2 的内容。</p>
  </div>
  <div id="tabs-3">
    <p>这是选项卡 3 的内容。</p>
 div>
</div>

<button id="change-tab">更改选项卡</button>

<script>
$( "#tabs" ).tabs();

$( "#change-tab" ).click(function() {
  $( "#tabs" ).tabs( "option", "active", 2 ); // 将选项卡 3 设置为当前项卡
});
</script>

这将创建一个选项卡，并在页面上添加一个按钮。当用户单击按钮时，将将当前选项卡更改为选项卡 3。

总结：

active 选项允许您设置当前选项卡的索引。您可以使用此选项来在页面加载时设置默认选项卡，或在用户与选项卡交互时动态更改选项卡。

以上是关于 jQuery UI tabs active 选项的详细攻略，包括语法和两示例。

Tags: