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

tabs from another html page inside a tab of my html page -web application user interface

本文关键字：选项 html 一个 另一个 -web 页面 我的 应用程序 用户界面      更新时间：2024-05-18

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

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

要将div xyz的内容加载到topdiv，当我单击侧菜单中的特定链接时，它（xyz）在另一个页面abc.html中。。。但有时，当#xyz将再次具有4或5个选项卡时，这些选项卡在#topdiv中不可用。。。相反，它们显示为列表。。正在使用$("#___").tabs()创建选项卡。。。有人能帮我吗？我不能在这里添加图像，因为我在堆栈溢出中没有足够的信誉。如果有人提供你的电子邮件地址，我可以附上我当前页面状态的图像，以及我需要设计的图像。。。这是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
    
    
    
        
              ========================================================================================

请注意，div'#mainmenu'以选项卡格式出现。。。但是"#内部选项卡"；还具有类"；选项卡"；未以选项卡格式显示。。相反，它们在#topdiv中显示为列表及其下方的内容=================================================

我假设您使用的是jquery ui选项卡。如果是，在加载其他页面内容后，请在主div 上再次应用选项卡功能

$( "#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之前就被调用了。因此，它们只能显示为列表，因为在调用$（。现在它被避免了，工作代码是

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

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

所以我认为，当你需要在没有任何错误的情况下完成这些事情时，总是使用回调函数是很好的。。。如果有人知道这种方法的缺点，请在这里发帖。。这对我这个新生会很有帮助期待软件开发的职业生涯。。。

相关文章：