Question

我喜欢jQueryUI，但Tabs小部件似乎太复杂了（jQueryUI版本1.10.3）。

我知道它可以动态加载内容，这一切都很精彩，但我这里有一个非常简单的结构，带有一个表单和一些DataTables，或多或少是这样的：

<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 Tabs应用于此时，事情会发生严重破坏。我已经知道的一个原因是在我的代码中使用<base>标签，这使得Tabs“认为”我想要动态加载我的内容，而不是简单地隐藏/显示已存在的内容。但即使使用黑客来解决这个问题，DataTables也无法正确呈现。

坦率地说，我不想花太多时间试图找到解决办法。

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

这可以解决我的问题。如果我手动创建一些按钮并将只需执行display: none / display: block的点击事件与我的div相关联，它们就像魅力一样，包括DataTables。

事实上，我正在考虑完全转储jQueryUI Tabs并创建必要的代码来做到这一点，但如果可能的话，我更愿意使用jQueryUI Tabs。

提前多多感谢！

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

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

1 个答案: