jQuery标签，使用类似菜单，点击链接时加载页面答案

【问题标题】：jQuery tabs, use like menu, load page when click on linkjQuery标签，使用类似菜单，点击链接时加载页面
【发布时间】：2010-08-03 12:14:59
【问题描述】：

我已将 jQuery 选项卡添加到我即将发布的网站。到目前为止没有问题。

但我希望 - 在单击选项卡时 - 它应该像常规链接一样工作。

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

Nunc tincidunt
忧郁症
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等等。

我应该如何做到这一点？

【问题讨论】：

标签： jquery jquery-ui menu coding-style jquery-ui-tabs

【解决方案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 event 中自己更改window.location，如下所示：

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

You can give it a try here （请注意，虽然您会得到意外的/404 页面，因为这些 PHP 文件不存在于 jsfiddle 上）

【讨论】：

这不起作用，因为 jQuery 将在初始化时选择第一个选项卡，因此尝试通过 ajax 加载第一个 url (nunc.php)。您可以通过在 firebug 中观察网络活动来确认您的示例中的这种行为。如果页面存在，如果第一个选项卡链接到自身，您将获得诸如递归网页之类的有趣效果。我们需要一种完全停用 ajax 的方法。但看起来我们不能再...

【解决方案2】：

您想通过 ajax 拉取内容吗？如果是这样，这应该会有所帮助：

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

【讨论】：

【解决方案3】：

我不确定你想要它做什么，但如果它应该打开链接作为当前页面的新页面/替换，文档解释说：

[如何...] ...跟随标签的 URL 而不是通过 ajax 加载其内容

请注意，在新标签页中打开标签页窗口是意外的，例如不一致的行为暴露了可用性问题 (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

【讨论】：

我认为我使用它的方式与我的网站结构可能存在某种冲突。让我解释一下。我有 header.php、footer.php 文件，我在我的文件中包含如下内容。示例：文件：add-user.php 在标题中我有我的 jQuery 选项卡。但是，当在每个文件中实现 header.php 时，我得到了结构良好的“jQuery 选项卡”以及
- - 列表下的链接与“jQuery 选项卡”中的
  -list 中的链接相同hrefs 工作，但不是“jQuery 选项卡”。怎么会？
您所经历的可能就是我在之前的评论中所解释的。来自 jQuery 的不需要的 ajax 调用。你找到解决办法了吗？

【解决方案4】：

当然是用 .php 链接替换你的 has 链接 (#) 并将链接的 ID 更改为不引用选项卡的 ID？

【讨论】：