Question

我已将jQuery标签添加到我的upcomming网站。到目前为止没问题。

但是我想 - 当点击标签时 - 它应该做并且表现为常规链接。

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

Nunc tincidunt
Proin dolor
Aenean lacinia

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

我想要以下内容：

示例2：点击

时

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

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

我该如何做到这一点？

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将这些页面加载到相应的选项卡中。要防止出现这种情况，只需更改window.location中的select event，如下所示：

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

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

Answer 2

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

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

Answer 3

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

[如何...] ...按照标签的网址而不是   通过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

Answer 4

肯定是用你的.php链接替换你的链接（＃）并更改链接的ID而不引用标签的那些？

jQuery选项卡，使用类似菜单，单击链接时加载页面

4 个答案: