jQuery UI 选项卡没有 href 和/或内容，只有事件？

Question

我想做一些类似 WordPress 编辑器的东西。
我采用了 jQuery UI 选项卡(我不想使用其他选项卡插件，因为我已经在网站上使用 jUI 作为选项卡)并创建了两个名为“WYSIWYG”和“HTML”的选项卡。选项卡标题下有一个 TEXTAREA。
然后我想使用NicEdit - 正如您在演示中看到的，它可以使用 HTML 编辑器“包裹”和“展开”文本区域。一切看起来都很好，但问题是:

• 当我在选项卡的 HREF 中使用“”或“#”时，第一个选项卡处于事件状态，第二个选项卡不是事件的 - 因此不可点击，因此我无法将 SELECT 事件附加到它
• 当我使用不存在的 id ( <a href="#notexist">... ) 时，它当然会抛出异常
• 当我使用不存在的“虚拟”选择器(实际上 - <a href="dummy">... )时，在选项卡标题下(选项卡和文本区域之间)会出现相当大的空间，就像选项卡创建了新的 div 并将其“关闭”为内容一样.

我想要的只是使用 jQuery UI 选项卡创建两个没有内容的选项卡，可以选择(取消)选择并在选择时触发事件，这样我就可以使用 NicEdit。我错过了什么？

Answer 1

我一直在寻找实现相同目标的自然方法(这就是我进入本主题的方式)。

由于这里没有答案，我将发布我最后的简单解决方案:

<div id="tabs" class="ui-tabs">
   <ul>
      <li><a id="firstTab" href="#listContent" onclick="yourOwnHandler();">Text</a></li>
      <li><a href="#listContent" onclick="yourOwnHandler();">Text</a></li>
      <!-- Etc, etc... -->
   </ul>
   <div id="listContent"></div> 
</div>

所有的想法都在空的 div 中，无论 jQuery 应用到什么类，它都不会显示 - 只是因为没有什么可显示的。

这与您的 3d 方法很接近，但问题是 href 不正确(没有 #)，除非这是您想要的。

如您所见，您甚至不需要多个 div - 每个选项卡 href 可以相同。我选择“listContect”作为 div ID，因为 URL“yourSite/Page#listContent”看起来比带有“#dummy”或“#tabs”的内容更好。

当然，如果使用 jQuery 附加 onclick 事件会更漂亮，但是我在这里使用内联方法是有原因的(特定于我的页面)。