jQuery UI 和将数据加载到选项卡中答案

【问题标题】：jQuery UI and loading data into a tabjQuery UI 和将数据加载到选项卡中
【发布时间】：2012-04-02 19:09:16
【问题描述】：

我正在使用 JQuery UI 创建一个选项卡，我想将我的 php 文件的内容输入到此选项卡中。我首先创建一个选项卡，然后选择它。

function createTab2() {
       //create a tab
       $("#tabs").tabs("add","#tabs-2","Second Tab");
       $("#tabs-2").css("display","block");   
       $('#tabs').tabs('select', "#tabs-2");        
       $.get('tab2.php', function(data) {
            $('.result').html(data);
            alert('Load was performed.');
        });
}

我尝试使用 JQuery .get 函数返回数据，并在出现警报时正常工作。但是，内容并未输入到选项卡中 - 我只是在我的 Javascript 控制台中看到它们。

如何让 php 文件的内容出现在这个选项卡中？

【问题讨论】：

当您说内容时，您是指原始数据还是 html 格式的数据？
在 jqueryui.com 中，有一个通过 ajax 加载内容的演示。看看jqueryui.com/demos/tabs/#ajax
你只有一个.result div吗？
@DG3 很好 - 我错过了。你知道我如何将它与标签的创建结合起来吗？我可以看到如何在加载现有选项卡时使用它。创建后选项卡中没有 div（另一个我没有注意到的问题）。
jqueryui.com/demos/tabs/#manipulation.

标签： javascript jquery jquery-ui

【解决方案1】：

在标签 2 的标记中，您需要在源 html 中添加一个 href。

<div id="tabs">
 <ul>
     <li><a ><span>Content 1</span></a></li>
     <li><a href="tab2.php"><span id="tabs-2">Content 2</span></a></li>
     <li><a ><span>Content 3</span></a></li>
 </ul>
</div>

或者您可以尝试直接加载选项卡。

$("#tabs-2").load('tab2.php');

source

【讨论】：

哇！ $("#tabs-2").load('tab2.php'); 有效。不幸的是，它似乎不支持 css 样式。
它只会选择调用页面中包含的样式。
如果我有一个静态页面，就会选择样式。如果我将 tab 2 替换为 php，则不再应用样式。