jQuery选项卡，像菜单一样使用，点击链接时加载页面。

Question

我已经在我的网站上添加了jQuery选项卡，目前没有问题。但是我希望 - 点击选项卡时，它应该像常规链接一样执行和行为。

示例1：查看此链接http://jqueryui.com/demos/tabs/default.html。单击选项时：

Nunc tincidunt Proin dolor Aenean lacinia

它会从同一文件加载内容，并且URL是静态的（default.html）。

我想要以下内容：

示例2：单击

Nunc tincidunt（例如nunc.php） Proin dolor（例如proin.php） Aenean lacinia（例如aenean.php）

我希望整个页面重新加载。单击选项卡“Nunc tincidunt”应加载nunc.php（并更改URL），单击“Proin dolor”应加载proin.php等等。

我该如何实现这一点？

- Fredrik

Answer 1

您可以为锚点添加真实的href属性，例如：

<div id="tabs"> 
    <ul> 
        <li><a href="nunc.php">Nunc tincidunt</a></li> 
        <li><a href="proin.php">Proin dolor</a></li> 
        <li><a href="aenean.php">Aenean lacinia</a></li> 
    </ul>
</div>​​​​​​​​​​

默认情况下，它会尝试通过 AJAX 将这些页面加载到相应的选项卡中。如果要防止这种行为，只需在 select 事件 中自己更改 window.location，像这样：

$("#tabs").tabs({
    select: function(event, ui) {
       window.location = $.data(ui.tab, 'href.tabs');
    }
});​​​​​​​

你可以在这里试一试 (请注意，由于jsfiddle上没有这些PHP文件，所以可能会出现意外/404的页面)

- Nick Craver

---

这样做是行不通的，因为jQuery在初始化时会选择第一个选项卡，因此尝试通过ajax加载第一个URL（nunc.php）。您可以通过观察Firebug中的网络活动来确认此行为。如果页面存在，则会出现有趣的效果，例如如果第一个选项卡链接到自身，则会出现递归网页。我们需要一种完全停用ajax的方法。但看起来我们不能再这样做了... - PowerKiKi

Answer 2

我不确定你想要它做什么，但如果它应该作为一个新页面/替换当前页面打开链接，文档有详细说明：

[How to...] ...follow a tab's URL instead of loading its content via ajax

Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).

$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    } });

请见http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

- MvanGeest

---

我认为在我的网站结构中，可能存在某种冲突导致我使用它的方式有问题。让我解释一下。我有header.php、footer.php文件，我在我的文件中像以下这样包含它们。例如：文件：add-user.php <?PHP include('header.php');// 内容放在这里 include('footer.php'); ?> 在头部，我有我的jQuery选项卡。但是当在每个文件中实现header.php时，我既得到了漂亮结构化的“jQuery选项卡”，也得到了一个<ul><li>列表，其中包含与“jQuery选项卡”中相同的链接，<ul>列表的href可以工作，但“jQuery选项卡”不能。为什么？ - Fredrik

你所遇到的问题可能就是我在之前评论中解释的。这是由jQuery引起的不必要的ajax调用。你找到解决办法了吗？ - PowerKiKi

Answer 3

你想通过ajax获取内容吗？如果是的话，这应该会有所帮助：

http://jqueryui.com/demos/tabs/ajax.html

- justcompile

Answer 4

当然，这只是将你的has链接（#）替换为.php链接，并将链接的ID更改为不引用选项卡中的链接。

- SimonDowdles