博客

jQuery UI tabs collapsible选项

  • Post category:jquery

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

jQuery UI tabs collapsible 选项

collapsible 选项允许您启用或禁用折叠功能。当启用时，用户单击当前选项卡时，将关闭该选项卡。当禁用时，用户无法关闭当前选项卡。

语法

$(selector).tabs({
  collapsible: true/false
});

参数

  • true/false：启用或禁用折叠功能。

示例一：启用折叠功能

<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>

<script>
$( "#tabs" ).tabs({
  collapsible: true // 启用折叠功能
});
</script>

这将创建一个选项卡，启用折叠功能。当用户单击当前选项卡时，将关闭该选项卡。

示例二：禁用折叠功能

<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>

<script>
$( "#tabs" ).tabs({
  collapsible: false // 禁用折叠功能
});
</script>

这将创建一个选项卡，禁用折叠功能。当用户单击当前选项卡时，将无法关闭该选项。

总结：

collapsible 选项允许您启用或禁用折叠功能。当启用时，用户单击当前选项卡时，将关闭该选项卡。当禁用时，用户无法关闭当前选项卡。

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

Tags: