jQuery选项卡小部件-交换选项卡内容


jQuery Tabbed widget - swap tabbed content

我已经使用PHP构建了一个应用程序,并使用HTML为其提供了一个不同的基本界面,但我现在希望通过使用jQuery UI小部件来改善外观。我已经加载了选项卡小部件作为主菜单使用,并将我的应用程序的主要部分链接到这些部分,因此我有了一个有效的主菜单。当我点击一个选项卡时,一个页面会加载到窗口中,但问题是如果我点击这个页面上的链接,它会把我带到另一个地方。对我来说,在该选项卡中加载新页面最简单的方法是什么?

以下是我所说的小部件的链接:http://jqueryui.com/demos/tabs/#default

编辑:在这个链接下面有一个教程代码片段,上面写着

"…在当前选项卡中打开链接,而不是离开页面"

标签内容加载后的"Hijax"链接:

$('#example').tabs({
    load: function(event, ui) {
        $(ui.panel).delegate('a', 'click', function(event) {
            $(ui.panel).load(this.href);
            event.preventDefault();
        });
    }
});

这听起来很有希望,但我不确定如何使用它。在我的选项卡式界面页面(tabbedhome_v.php)中,我有一个id为"tabs"的容器,其中包含选项卡式内容。所以我只是将代码中的example一词改为"tab",现在它似乎适用于更多的页面,但由于某种原因,并不是所有页面。有人能给我解释一下这是怎么回事吗?

我在上面的代码中观察到:一个图像超链接会引导下一个页面在面板中加载,但我在这些页面上加载的javascript链接或jquery现在都不起作用。为什么会这样?

由于您已经在使用jQuery,您可能需要研究.load():http://api.jquery.com/load/

您可以使用它将页面加载到页面中的元素中

$('#tab-1').load('content.html');