Question

ajax和标签链接拼图。我已经浏览了所有的文档，所以无法使用它。

链接Non-ajax Tab One有什么作用。不起作用的是从其他页面或URL直接链接到选项卡。

即，如果我转到http://mydomain.com/ajaxloadedpage1/，我会收到内容的纯文本，而不会在标签中呈现。如果我转到http://mydomain.com/#ajaxloadedpage1，我会收到第一个标签Non-ajax Tab One。

如何在标签中加载ajax页面？我是通过php加载ajax内容并且源文件没有.html文件后缀是复杂吗？

编辑2/11/11 仍然无法正常工作，但是当我想出来时，我会添加修复程序。

标题代码

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片段错位，可以解决各种浏览器错误和奇怪问题;当你只是点击而不是通过网址到达那里时，错误可能会隐藏问题。

Answer 2

我不确定这是否是您想要的，但我使用了jQuery UI标签的cookie选项，如下所示：

<script type="text/javascript">
    $(document).ready(function(){
    $("#tabs_start").tabs({
        cookie: {
        // store cookie for a day, without, it would be a session cookie
            expires: 1
        }
    });
</script>

这会存储我上次访问网页时使用的标签。只需确保您的不同标签集具有不同的ID。

Answer 3

你看过jQuery.load函数吗？ http://api.jquery.com/load/

示例：将ajaxloadedpage2.php的#ajaxloadedpage div加载到＃ajaxloadedpage2：

$('#ajaxloadedpage2').load('ajaxloadedpage2.php #ajaxloadedpage');

jQuery Tabs UI和Ajax链接问题

3 个答案: