jQuery Tabs UI 和 Ajax 链接问题

Question

一个 ajax 和选项卡链接谜题。我已经阅读了所有文档和 SO，但无法让它发挥作用。

有效的是非 ajax Tab One 链接。从其他页面或 URL 直接链接到选项卡是行不通的。

即，如果我转到 http://mydomain.com/ajaxloadedpage1/我得到内容的纯文本，而不是在选项卡中呈现。如果我去http://mydomain.com/#ajaxloadedpage1我得到第一个选项卡 Non-ajax Tab One。

如何在选项卡中加载 ajax 页面？我通过 php 加载 ajax 内容并且源文件没有 .html 文件后缀，这是否会造成麻烦？

编辑 2/11/11 仍然无法正常工作，但我会在弄清楚后添加修复程序。

header 代码

ajax loader:

$(function() {
    $("#tabs").tabs({
        ajaxOptions: {
        error: function(xhr, status, index, anchor) {
            $(anchor.hash).html("I tried to load this, but couldn't. Try another link?");
            } 
        } 
    });
});


link enabler:

$(document).ready(function(){ 
    var $tabs= $("#tabs").tabs(); 
    $('.ajaxloadedpage1').click(function() { 
        $tabs.tabs('select', 1); 
        return false;
    }); });


(other links removed for clarity)

页面代码:

<div id="tabs">
<ul><a href="#tabs-1">Non-ajax Tab One</a></li>
<li><a id="#ajaxloadedpage1" href="http://mydomain.com/ajaxloadedpage1/"><span>Ajax Loaded Page1</span></a></li>
<li><a id="#ajaxloadedpage2" href="http://mydomain.com/ajaxloadedpage2/"><span>Ajax Loaded Page2</span></a></li>
<li><a id="#ajaxloadedpage3" href="http://mydomain.com/ajaxloadedpage3/"><span>Ajax Loaded Page3</span></a></li>
<ul>


<div id="tabs-1">Non-ajax Tab One</div>

//This tab has link to other tabs in this fashion, and they work

<a href="#ajaxloadedpage1" class="ajaxloadedpage1" title="Ajax Loaded Page1">Ajax Loaded Page1</a>

<a href="#ajaxloadedpage2" class="ajaxloadedpage2" title="Ajax Loaded Page2">Ajax Loaded Page2</a>

<a href="#ajaxloadedpage3" class="ajaxloadedpage3" title="Ajax Loaded Page3">Ajax Loaded Page3</a>
</div></div>


<div id="ajaxloadedpage1"></div>

<div id="ajaxloadedpage2"></div>

<div id="ajaxloadedpage3"></div></div>

Answer 1

您的 id 属性中真的有 # 吗？您的示例 HTML 是这样说的:

<li><a id="#ajaxloadedpage1" ...
<li><a id="#ajaxloadedpage2" ...
<li><a id="#ajaxloadedpage3" ...

但我想你想说的是:

<li><a id="ajaxloadedpage1" ...
<li><a id="ajaxloadedpage2" ...
<li><a id="ajaxloadedpage3" ...

还有其他类似的情况。

jQuery-UI 选项卡内有一些特殊的 URL 片段修改，以解决各种浏览器错误和奇怪现象；当您只是单击鼠标时，这种损坏可能会隐藏问题，但当您通过 URL 到达那里时则不会。