jQueryUI 选项卡：我只需要它来显示或隐藏 div！为什么这么难？

Question

我喜欢 jQueryUI，但 Tabs 小部件似乎让事情变得过于复杂（jQueryUI 版本 1.10.3）。

我知道它可以即时加载内容，这一切都很棒，但我这里有一个非常简单的结构，带有一个表单和一些数据表，或多或少像这样：

<div id="MyContent">
  <ul>
    <li><a href="#Form">Main Data</a></li>
    <li><a href="#SubTable1">Additional data 1</a></li>
    <li><a href="#SubTable2">Additional data 2</a></li>
  </ul>
  <div id="Form">
    <form>...</form>
  </div>
  <div id="SubTable1">
    DataTables 1 goes here
  </div>
  <div id="SubTable2">
    DataTables 2 goes here
  </div>
</div>

但是，当我将 jQueryUI 选项卡应用于此时，事情变得非常糟糕。我已经知道的一个原因是在我的代码中使用了<base> 标签，这让标签“认为”我想即时加载我的内容，而不是简单地隐藏/显示已经存在的内容。但即使使用 hack 来解决此问题，DataTables 也无法正确呈现。

坦率地说，我不想花几天时间试图找出解决办法。

相反，我想知道是否有一种方法可以“关闭”JqueryUI 选项卡的所有花哨功能，并使用每个 div 中的任何内容使其隐藏和显示我的选项卡。有可能吗？

这将解决我的问题。如果我手动创建一些按钮并将一个简单地执行display: none / display: block 的单击事件关联到我的 div，它们就像一个魅力，包括 DataTables。

事实上，我正在考虑完全转储 jQueryUI 选项卡并为此创建必要的代码，但如果可能的话，我更愿意使用 jQueryUI 选项卡。

提前非常感谢！

Answer 1

我承认这有点笨拙——但作为一个例子，它确实有效。

HTML：

<div id="MyContent">
  <ul>
    <li><a href="#Form">Main Data</a></li>
    <li><a href="#SubTable1">Additional data 1</a></li>
    <li><a href="#SubTable2">Additional data 2</a></li>
  </ul>
  <div id="Form" class="tab active">
    <form>My Form</form>
  </div>
  <div id="SubTable1" class="tab">
    DataTables 1 goes here
  </div>
  <div id="SubTable2" class="tab">
    DataTables 2 goes here
  </div>
</div>

CSS：

.tab{display:none}
.active{display:block}

jQuery:

$('#MyContent a').on('click',function(e){
    var id = $(this).attr('href')
    $('div.active').toggleClass('active');
    $(id).toggleClass('active', ($(this).attr('class') != 'active'));
    console.log()
})

工作jsFiddle