Javascript “我的html页面”选项卡中另一个html页面的选项卡-web应用程序用户界面

我正在创建一个有4个选项卡的web应用程序。。。每个选项卡都包含一个侧菜单（jQuery），其余部分分为2部分，topdiv和bottomdiv（表中有2列..col1=侧菜单，col2=topdiv+bottomdiv）。。。我用

    $("#topdiv").load("contents/abc.html #xyz") 

要将div xyz的内容加载到topdiv，当我单击侧菜单中的特定链接时，topdiv（xyz）位于另一个页面

abc.html

。。。但有时当

#xyz

再次有4或5个选项卡时，这些选项卡在

#topdiv

中不能作为选项卡使用。。。相反，它们只显示为列表。。我使用

$（“#uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu？我不能在这里添加图像，因为我在堆栈溢出中没有足够的声誉。如果有人提供你的电子邮件地址，我可以附上我的页面和那些我需要设计的当前状态的图像。。。这是ma代码的一部分

 ============================================================================
  

      home.jsp
        ======================================================================
                <div id="mainmenu" class="tabs">
                    <ul>
                        <li ><a href="#tab1">tab1</a></li>
                        <li><a href="#tab2">tab2</a></li>
                        <li><a href="#tab3">tab3</a></li>
                     </ul>
        
        <div id="tab1">
        </div>
        
        <div id="tab2">
        
                     <div id="topdiv">
                      </div>
                    <div id="bottomdiv">
                       </div>
        
        </div>
        
        
        <div id="tab3">
        </div>
        
        </div> 
        
        
        ===========================================================================  
        abc.html
        ============================================================================
        <div id="xyz">
             <div id="innertabs" class="tabs">  
                <ul>
                     <li ><a href="#innertab1">inner tab1</a></li>
                <li><a href="#innertab2">inner tab2</a></li>
                <li><a href="#innertab3">inner tab3</a></li>
                
            </ul>  
                       <div id="innertab1">inner tab 1 contents</div>
                       <div id="innertab2">inner tab 2 contents</div>
                       <div id="innertab3">inner tab 3 contents</div>
                    
               </div>
        
        </div>
        
        
        ===========================================================================================
        main.js//javascript---jquery-ajax connected
        ===========================================================================================
        
        $(".tabs").tabs();
        $("#topdiv").load("contents/abc.html #xyz");
        enter code here
    
    
    
        
              ========================================================================================

============================================================================
home.jsp
======================================================================





===========================================================================  
abc.html
============================================================================





内部选项卡1目录
内部选项卡2目录
内部选项卡3目录
===========================================================================================
main.js//javascript--jquery-ajax已连接
===========================================================================================
$（“.tabs”）.tabs（）；
$（“#topdiv”）.load（“contents/abc.html#xyz”）；
在这里输入代码
========================================================================================

请注意div“#主菜单”以选项卡格式出现。。。但是也有类“tabs”的“#innertabs”没有以选项卡格式出现。。相反，它们在#topdiv中显示为列表及其下方的内容
==================================================================================
我假设您使用的是jquery ui选项卡。
如果是这样，在加载其他页面内容后，在主div上再次应用tabs功能

$( "#tabs" ).tabs();

实际上，您应该在加载ajax内容后应用
.tabs（）
。在那之前没有。我不确定两次应用
.tabs（）
是否会损坏它

更新：
这是你的小提琴。那么您的代码将被删除

 $("#mainmenu").tabs();
 $("#topdiv").load("contents/abc.html #xyz");
 $("#innertabs").tabs();

经过大量的研究和实验，我终于找到了解决这个问题的办法。。。实际上，我必须为选项卡使用唯一的div id，而不是class=“tabs”。。。然后tab语句将更改为$（“#innertabs”）.tabs（）；但要确保仅在加载内容后才调用$（）.tabs（），请将该语句放在$（）.load（）的回调函数中。。。因此，我的实际问题是$（“#innertabs”）。tabs（）在从页面abc.html加载到#topdiv之前就被调用。因此，它们只能显示为列表，因为在$（）时没有id=innertabs的div。tabs（）被调用。现在它被避免了，工作代码也被删除了

$("topdiv").load("contents/abc.html #xyz",function(){$("#innertabs").tabs();}); 

因此，只有在将div加载到topdiv中之后，才会生成相应的选项卡，因此它将显示为选项卡本身

所以我认为当你需要在没有任何错误的情况下完成这些事情时，一直使用回调函数是很好的。。。
另外，如果有人知道这种方法的缺点，请在这里发布。。作为一名新生，这将对我有帮助
期待在软件开发领域的职业生涯
 您正在使用jquerytabs吗$（“#tabs”）.tabs（）；对我正在使用$（“#____;”）.tabs（）将class=“.tabs”添加到我需要作为tabs的所有div中。。。然后我在jquery中添加$（“.tabs”）.tabs（）。。这是正确的方法吗。。。我没有得到想要的结果。。。加载后，am GET ma main tab以tab格式出现在ma页面内，但加载的内容frm other page不以tab形式显示。如果方式不正确，请将其包装在一个div中，并给该div一个Id，例如“my_div”，然后像$（“#my_tabs”）一样应用。tabs（）；你能给我举一个简单的例子吗。。。我的意思是，你可以创建一个包含2个或3个选项卡的页面，然后在任何dat选项卡中从另一个页面加载一个包含2个或3个选项卡的div。。。如果你给我发送你的电子邮件id，我就可以将我当前页面状态和目标设计的图片发送给你，你能发布你的全部代码吗？或者只是粘贴，如果打开并保存并发送链接，它对我不起作用。。但我发现了一些奇怪的事情……我已经提到主页上的4个选项卡有4个不同的侧菜单……我用4个不同的javascript函数编写了这4个侧菜单，并使用window.onload和$（#main menu）.tabs（）和$（#innertab”）.tabs（）加载了所有的侧菜单；奇怪的是，如果我在所有侧菜单功能中添加一个警报（“hai”），我就可以正确地设置内部选项卡。。。但是，如果我只是避免使用这些alert（）s，我会将innertabs作为列表。。所以我认为实际问题与多重加载和触发时间有关。。有什么想法吗？？？