通过AJAX正确加载jQuery UI选项卡

Question

I have some tabs on a web page in my website using jQuery UI and I want to load them dynamically in another web page on the same domain. 我在使用jQuery UI的网站上的网页上有一些选项卡，我想将它们动态加载到同一域的另一个网页中。 I've used the AJAX load() function, by clicking on some elements, but when I click on them I get what I am not really expecting to get, or so I get only the html structure without any visual jQuery tab, although I've loaded correctly all the needed and indispensable links in the head; 我通过单击一些元素来使用AJAX load()函数，但是当我单击它们时，我得到的是我并不是真正希望得到的东西，或者我只得到了html结构，而没有任何可视化的jQuery标签，尽管正确地将所有必要和必不可少的链接加载到头部； maybe I can explain it better with this example: ( in this example all I want to do is to load some div elements from a page A into a page B, obviously all this will take place just in the page B ) 也许我可以通过以下示例更好地解释它：（在此示例中，我要做的就是将页面A中的一些div元素加载到页面B中，显然所有这些操作仅在页面B中发生）

page A A页

    <div id="tabs" ui-tabs>
        <ul ui-tabs-nav>
            <li><a href="#fragment-1">One</a></li>
            <li><a href="#fragment-2">Two</a></li>
            <li><a href="#fragment-3">Three</a></li>
        </ul>
        <div id="fragment-1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="fragment-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, aliquam erat volutpat.
        </div>
        <div id="fragment-3">
            Lorem ipsum dolor sit  
        </div>
    </div>

Page B 网页B

<body>
    <div id="box">

    </div>
    <span id="button" style="cursor:pointer;">button</span>       
    <script>
        $(document).ready(function(){
            $("#button").click(function(){
                $("#box").load("paginaA.html #tabs"); 
            });
        });              
    </script>
</body>

So, the tabs with id="tabs" should appear just right in the div with the id="box". 因此，带有id =“ tabs”的标签应该恰好在带有id =“ box”的div中。 Does someone explain me why this shouldn't happen to me? 有人向我解释为什么这不应该发生在我身上吗？ I apologize for my bad-English! 我为我的英语不好而道歉！

I have these two pages and I want simply to let appear dynamically some divs from a page into another by clicking on some links; 我有这两个页面，我只想通过单击某些链接，使页面中的某些div动态显示为另一个。 now I've just created a jsFiddle page which is linking to another jsFiddle page like as my aim, so it has the same purpose. 现在，我刚刚创建了一个jsFiddle页面，该页面链接到另一个jsFiddle页面（作为我的目标），因此它具有相同的目的。 You will see that the jQuery UI tabs won't appear properly and that's my actual problem. 您会看到jQuery UI选项卡不会正确显示，这是我的实际问题。 Here the links are: jsFiddle this is where the div is and it has id="boxDrag", and jsFiddle is where there's the div with id="boxTab" in which I would like to make the "boxDrag" appear into, by clicking on the "click here" button. 这里的链接是： jsFiddle这是div所在的地方，它具有id =“ boxDrag”，而jsFiddle是id ==“ boxTab”的div中我想要通过单击使“ boxDrag”出现在其中的地方。在“单击此处”按钮上。 So these two pages simulate the two pages on my website. 因此，这两页模拟了我网站上的两页。

Answer 1

( "#box" ).load( "paginaA.html #tabs", function() { $(".tabs").tabs({}); })

通过AJAX正确加载jQuery UI选项卡

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-11-28 16:30:24

通过AJAX正确加载jQuery UI选项卡

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-11-28 16:30:24

解决方案1
0 已采纳 2016-11-28 16:30:24