博客

jQuery UI Tabs destroy()方法

  • Post category:jquery

以下是关于 jQuery UI Tabs destroy() 方法的详细攻略：

jQuery UI Tabs destroy() 方法

destroy() 方法允许您销毁选项卡小部件并还原其原始状态。这将删除所有选项卡和相关的 DOM 元素，并还原选项卡小部件的初始状态。

语法

$(selector).tabs("destroy");

示例一：销毁选项卡小部件

<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="destroy-tabs">销毁选项卡</button>

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

$( "#destroy-tabs" ).click(function() {
  $( "#tabs" ).tabs( "destroy" );
});
</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>

<button id="destroy-tabs">销毁选项卡</button>

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

$( "#destroy-tabs" ).click(function() {
  $( "#tabs" ).tabs( "destroy" );
  $( "#tabs" ).tabs(); // 重新创建选项卡小部件
});
</script>

这将创建一个选项卡小部件，并在页面上添加一个按钮。当用户单击按钮时，将销毁选项卡小部件并重新创建它，从而还原其原始状态。

总结：

destroy() 方法允许您销毁选项卡小部件并还原其原始状态。这将删除所有选项卡和相关的 DOM 元素，并还原选项卡小部件的初始状态。

以上是关于 jQuery UI Tabs destroy() 方法的详细攻略，包括语法和示例。

Tags: