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

Question

我想做一些类似 Wordpress 编辑器的事情。
我使用了 jQuery UI 选项卡（我不想使用另一个选项卡插件，因为我已经将 jUI 用于站点上的选项卡）并创建了两个名为“WYSIWYG”和“HTML”的选项卡。选项卡标题下有一个 TEXTAREA。
然后我想使用NicEdit - 正如您在演示中看到的那样，它可以使用 HTML 编辑器“包装”和“解开”textarea。一切看起来都很好，但问题是：

• 当我在选项卡的 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 事件会更漂亮，但是有一些原因（特定于我的页面）为什么我在这里使用内联方法。