嵌套的jQuery选项卡

我是jQuery的新手（几周）。 我正在尝试嵌套jQueryUI选项卡控件。 它工作正常，直到嵌套选项卡在外部文件中，然后我得到一个在jQuery源中抛出的exception。 这在某种程度上似乎是一个时间问题，因为如果我在嵌套选项卡的.ready函数中放置警告框就可以了。 有人可以帮忙吗？ 我确定之前一定要问过这个问题，但经过几个小时的搜索，我似乎无法找到解决方案。

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

外标签

       $(function() { $("#OuterTab").tabs(); });    
 
 
InnerTab1
 
InnerTab2
 
 
 
 
 
 
   

InnerTab1.aspx

          $(function() { $("#tabs").tabs(); });    
 
 
InnerTabA1
 
InnerTabA2
 
 
 
 
   

InnerTab2.aspx

         $(function() { $("#tabs").tabs(); });    
 
 
InnerTabB1
 
InnerTabB2
 
 
 
 
   

提前致谢！

阿德里安

Answer 1

您的重复“标签”ID属性肯定会遇到一些麻烦。 以下示例应该实现您正在寻找的内容：
主文件（外部标签）

           
 
 
InnerTab1
 
InnerTab2
 
 
 
 
 
 
    

标签1（tab1.html）

 
 
 
InnerTabB1
 
InnerTabB2
 
 
 This is tab b1 content 
 
 This is tab b2 content 
  

标签2（tab2.html）

 
 
 
InnerTabA1
 
InnerTabA2
 
 
 This is tab A1 content 
 
 This is tab A2 content 
  

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

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

Answer 2

调用innerTab页面后，所有HTML元素将立即呈现。 您可能遇到ID字段的多个副本的问题，例如“标签”…… JQuery正在引用$（“＃tabs”），但有两个存在。

你能发布JQuery错误吗？

Answer 3

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

只需删除整个head，body和html包装器标签，它就可以了。

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