嵌套的 jQuery 选项卡答案

【问题标题】：Nested jQuery tabs嵌套的 jQuery 选项卡
【发布时间】：2009-11-02 15:28:32
【问题描述】：

我是 jQuery 新手（几周）。我正在尝试嵌套 jQueryUI 选项卡控件。在嵌套选项卡位于外部之前，它工作正常文件然后我在 jQuery 源代码中抛出异常。这似乎在一定程度上是一个时间问题，因为如果我发出警报它工作的嵌套选项卡的 .ready 函数中的框。任何人都可以帮助？我敢肯定这个问题之前一定被问过，但在之后几个小时的搜索我似乎无法找到解决方案。

这是我非常简单的例子...

外部标签

    <head id="Head1" runat="server">
    <title></title>
    <link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
      rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/
    jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
       ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
       ui.tabs.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#OuterTab").tabs();
        });
    </script>
    </head>
<body>
  <div id="OuterTab">
    <ul>
      <li><a href="innerTab1.aspx" title="InnerTab1"><span>InnerTab1</
         span></a></li>
      <li><a href="innerTab2.aspx" title="InnerTab2"><span>InnerTab2</
         span></a></li>
    </ul>
    <div id="InnerTab1">
    </div>
    <div id="InnerTab2">
    </div>
  </div>
</body>
</html>

InnerTab1.aspx

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title></title>
    <link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
      rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/
      jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
      ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
      ui.tabs.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();
        });
    </script>
</head>
<body>
   <div id="tabs">
        <ul>
          <li><a href="#tabA1"><span>InnerTabA1</span></a></li>
          <li><a href="#tabA2"><span>InnerTabA2</span></a></li>
        </ul>
        <div id="tabA1"></div>
        <div id="tabA2"></div>
   </div>
</body>
</html>

InnerTab2.aspx

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
     <link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();
        });
    </script>
</head>
<body>
   <div id="tabs">
        <ul>
          <li><a href="#tabB1"><span>InnerTabB1</span></a></li>
          <li><a href="#tabB2"><span>InnerTabB2</span></a></li>
        </ul>
        <div id="tabB1"></div>
        <div id="tabB2"></div>
   </div>
</body>
</html>

提前致谢！

阿德里安

【问题讨论】：

标签： jquery tabs jquery-ui-tabs

【解决方案1】：

您肯定在使用重复的“标签”ID 属性时遇到了一些问题。下面的示例应该可以实现您正在寻找的内容：
主文件（外部选项卡）

<html>
<head id="Head1" runat="server">
    <title></title>
    <link type="text/css" href="http://static.jquery.com/ui/themes/base/ui.base.css"
      rel="stylesheet" />
    <link type='text/css' href='http://static.jquery.com/ui/themes/base/ui.tabs.css'
      rel='stylesheet'>
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

</head>
<body>
  <div id="OuterTab">
    <ul>
      <li><a href="#InnerTab1" title="InnerTab1"><span>InnerTab1</span></a></li>
      <li><a href="#InnerTab2" title="InnerTab2"><span>InnerTab2</span></a></li>
    </ul>
    <div id="InnerTab1">   
    </div>
    <div id="InnerTab2">
    </div>
  </div>
      <script type="text/javascript">
        $(function() {
            $("#OuterTab").tabs();
            $('#InnerTab1').load('tab1.html', function() {
              $('#tabs').tabs();
            });
            $('#InnerTab2').load('tab2.html', function() {
              $('#tabs2').tabs();
            });
        });
    </script>
</body>
</html>

标签 1 (tab1.html)

<div id="tabs">
  <ul>
    <li><a href="#tabB1"><span>InnerTabB1</span></a></li>
    <li><a href="#tabB2"><span>InnerTabB2</span></a></li>
  </ul>
  <div id="tabB1">
    This is tab b1 content
  </div>
  <div id="tabB2">
    This is tab b2 content
  </div>
</div>

选项卡 2 (tab2.html)

<div id="tabs2">
  <ul>
    <li><a href="#tabA1"><span>InnerTabA1</span></a></li>
    <li><a href="#tabA2"><span>InnerTabA2</span></a></li>
  </ul>
  <div id="tabA1">
    This is tab A1 content
  </div>
  <div id="tabA2">
    This is tab A2 content
  </div>
</div>

这样，当你运行你的主文件时，这两个选项卡文件通过 jQuery 请求并加载到适当的 div 中。然后我定义了一个回调来激活刚刚加载的选项卡。

如果您需要更多详细信息，请在评论中跟进。

【讨论】：

Wally 感谢您的帮助。您的解决方案效果很好，但我还有几个问题。是否可以延迟加载任何不可见的外部文件（即 tab2.html），以便仅在单击其外部选项卡时才能访问它们？另外，是否可以直接使用外部文件，即localhost/tab1.html)。我基本上是在尝试将外部文件作为外部标签页的一部分“重新使用”，但我也需要直接访问它们。再次感谢阿德里安
延迟加载文件不会太费力，您必须将 .load() 函数附加到父选项卡的 click() 事件。对于您的第二部分，您必须在获取 tab1.html 和 tab2.html 文件时使用部分内容选择器。如果我的示例文件是完整的 HTML 页面（等），则可以改用： $('#InnerTab2').load('tab2.html #tabs2', function()... 代替。有意义吗？
Wally 抱歉，过了一段时间才回复。最近在其他事情上有点跑题了。我希望尽快回到我的 jQuery 开发中，并尝试您的建议。阿德里安
别担心，我知道那种感觉！

【解决方案2】：

调用 innerTab 页面后，所有 HTML 元素都会立即呈现。您可能对 ID 字段的多个副本（例如“选项卡”）有问题... JQuery 正在引用 $("#tabs")，但现在有两个。

能否请您发布 JQuery 错误？

【讨论】：

+1：元素 ID 必须始终是唯一的；否则你会得到非常不可预测的行为。
请参阅 Wally 的回答（如下），了解如何按照我的说明修复您的代码，并附上代码示例。（谢谢沃利！）

【解决方案3】：

如果您通过 ajax 获取内部选项卡，请不要包含完整的 html 文档和 jquery，所有内容都在 javascript 中重新定义并且存在冲突。

只需删除整个 head、body 和 html 包装器标签，留下，它应该可以工作。

您还需要在加载选项卡时重新定义它们。为 ajax 选项卡函数添加一个回调——（类似于function ontabAJAX(){ if ($('.tab .active .innertabs').length)){ $('.tab .active .innertabs').removeClass('innertabs').addClass('tabbed').tabs() }）。

【讨论】：