jQuery Tabs UI 和 Ajax 链接问题
ajax 和选项卡链接谜题。我已经阅读了所有文档和 SO,但无法让它发挥作用。
有效的是链接 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>
An ajax and tabs link puzzle. I've been through all the docs and SO and can't get this to work.
What works are the links Non-ajax Tab One. What doesn't work is a direct link to the tabs from another page or from a URL.
I.e., if I go to http://mydomain.com/ajaxloadedpage1/ I get the plain text of the content and not rendered in the tab. If I go to http://mydomain.com/#ajaxloadedpage1 I get the first tab Non-ajax Tab One.
How do I get the ajax page to load in the tab? Is it a complication that I am loading the ajax content via php and that the source file does not have the .html file suffix?
Edit 2/11/11 Still not working, but I will add the fix when I figure it out.
Header code
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)
Page code:
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(3)
你看过 jQuery.load 函数吗? http://api.jquery.com/load/
示例:加载ajaxloadedpage2的#ajaxloadedpage div。 php 进入#ajaxloadedpage2:
$('#ajaxloadedpage2').load('ajaxloadedpage2.php #ajaxloadedpage');
我不确定这是否是您想要的,但我对 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 即可。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
您的
id
属性中真的有#
吗?您的示例 HTML 是这样说的:但我认为您想说的是:
还有其他类似的情况。
jQuery-UI 选项卡内有一些特殊的 URL 片段修改,以解决各种浏览器错误和奇怪现象;当您只是单击鼠标时,这种损坏可能会隐藏问题,但当您通过 URL 到达那里时则不会。
Do you really have
#
in yourid
attributes? Your sample HTML say this:but I think you want to say this:
There are other cases like this too.
There is some special URL fragment mangling inside the jQuery-UI tabs to work around various browser bugs and oddities; that mangling could be hiding the problem when you're just clicking around but not when you get there through a URL.