一个 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>
最佳答案
您的 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 到达那里时则不会。
关于jQuery Tabs UI 和 Ajax 链接问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4832689/