jQuery UI非ajax选项卡将整个网站加载到自己中

jQuery选项卡出现大问题。

我正在尝试加载我的网站产品页上的选项卡。。。当页面加载时，我看到标签页的内容有一秒钟(标准的html标签页而不是ajax)，然后突然我的整个网站都加载在标签页内

我使用的是jqueryui选项卡演示页面中的标准代码。

<div id="productTabs">
<ul>
<li><a href="#tabDescription">Description</a></li>
<li><a href="#tabSpecs">Specifications</a></li>
<li><a href="#tabReviews">Reviews</a></li>
<li><a href="#tabDownloads">Downloads</a></li>
</ul>
<div id="tabDescription">test</div>
<div id="tabSpecs">test</div>
<div id="tabReviews">test</div>
<div id="tabDownloads">Sorry, no downloads available for this product.</div>
</div>
<script type="text/javascript">jQuery(document).ready(function(){jQuery("#productTabs").tabs();});</script>

但是，我在网站上有很多其他的javascript，只是想知道是否有人以前见过这个。

非常感谢

你说得对，这是BASE元标记。这是最新版本的jQueryUI(1.9)将面临的问题，它适用于1.8。对Tabs API进行了很多更改，但在检查jQuery源代码之前，似乎没有任何内容会导致此问题。

BASE元标记指示浏览器将选项卡中的href属性(用作选项卡内容的引用)从hash+id转换为完整的URL(使用BASE标记值)。这是预期的行为
以前版本的选项卡UI会很难猜测href是否真的是远程的，拆分href选项卡值，然后将其与当前URL进行比较并与BASE标记进行比较，然后决定它是否真的在本地
最新版本的jQuery没有检查BASE标记值
因此，当与BASE元标记一起使用时，最新版本将尝试使用Ajax加载选项卡内容，重新加载它们自己(或BASE URL中的任何内容)

这就是jQuery UI选项卡在1.8.24:版本中使用的内容

this.anchors.each(function( i, a ) {
var href = $( a ).attr( "href" );
// For dynamically created HTML that contains a hash as href IE < 8 expands
// such href to the full page url with hash and then misinterprets tab as ajax.
// Same consideration applies for an added tab with a fragment identifier
// since a[href=#fragment-identifier] does unexpectedly not match.
// Thus normalize href attribute...
var hrefBase = href.split( "#" )[ 0 ],
baseEl;
if ( hrefBase && ( hrefBase === location.toString().split( "#" )[ 0 ] ||
( baseEl = $( "base" )[ 0 ]) && hrefBase === baseEl.href ) ) {
href = a.hash;
a.href = href;
}

这就是jQuery UI选项卡在1.9.2:版本中使用的内容

function isLocal( anchor ) {
return anchor.hash.length > 1 &&
anchor.href.replace( rhash, "" ) ===
location.href.replace( rhash, "" )
// support: Safari 5.1
// Safari 5.1 doesn't encode spaces in window.location
// but it does encode spaces from anchors (#8777)
.replace( /s/g, "%20" );
}

由于Tabs代码的大量重写，代码的组织方式有所不同，但您可以理解($("base")[0]是base元标记值)。

到目前为止，我还没有找到任何方法来告诉标签"；这是本地的，不要使用Ajax；使用普通选项卡API。我能给你的是我同时快速修复它的方法(当我询问、重新检查并填写错误报告时)：一个破解。

function isLocal( anchor ) {
return anchor.hash.length > 1 &&
( (anchor.href.replace( rhash, "" ) === location.href.replace( rhash, "" ).replace( /s/g, "%20" )) ||
(anchor.href.replace( rhash, "" ) === $( "base" )[ 0 ].href));
}

这是较新的版本加上在以前版本中完成的检查。

在最新jQuery UI的非缩小副本中，用它替换isLocal函数。然后缩小文件。替换原始版本。测验

它在Firefox(17.0.1)和Chromium(18.0.1025.168)中对我有效。

缺点是您无法使用第三方副本(来自CDN)。对我来说，这不是问题，因为我的大多数应用程序都在内部网中使用。

如果有人找到了更好的解决方案，或者知道如何在不破解jQuery UI代码的情况下做到这一点，请告诉我们。

更新：我发现了这个错误报告(有几个重复)：http://bugs.jqueryui.com/ticket/7822我很想添加我自己的评论，但jQuery开发人员似乎不会"修复"；他们认为问题出在别处。引用错误跟踪器：

我不明白这是如何修复的。。。
下面是一个琐碎的动态PHP实现："http://"$_服务器['HTTP_HOST']$_服务器['REQUEST_URI']'。'#foo’。
在JavaScript中修复这个问题也很简单，但我不会提供示例代码，因为修复这个问题的地方不对，应该非常劝阻。链接的行为在所有浏览器中都有明确的定义和一致性。人们绝对没有理由使用不正确的URL，然后用JavaScript对其进行黑客攻击。
最后，需要注意的是；"固定"；这将意味着打破每个正确使用的人的正确行为。请记住，这是修复的，因为拥有正确URL的人遇到了旧代码中存在的真正错误。

这是一个在.js中工作的简单解决方案，因此您可以使用jquery.ui的第三方副本。
使用jquery ui 1.10.2进行测试。

$("#mytabs UL LI A").each(function() {
$(this).attr("href", location.href.toString()+$(this).attr("href"));
});
$("#mytabs").tabs();

正如@MV所提到的，问题是jquery混淆了我网页顶部的基本标签。因此，我没有选择编辑jQuery ui文件，而是简单地使用jQuery删除了基本标记，就像一样

<script>
jQuery(function() {
jQuery('base').remove();
jQuery( "#tabs" ).tabs();                   
});
</script>

这似乎对我有用，因为我不介意为了控制特定页面上的选项卡而临时删除基本标记。但我也在想一个解决方案，以防需要这些定义，比如将这些基标记收集到一个数组中，删除它们，然后在执行tabs()方法后，再次添加它们，这看起来有点st.id，但如果tabs(()没有实现任何侦听器模式，应该会起作用。我还没试过，现在还不会。不管怎样，看起来jQueryui确实有一个bug！

Angelica给出了对我有用的答案。我在requirejs文件中使用了这个答案，用于任何以类"tabs"作为选项卡选择器的页面。

jQuery(".tabs ul li a").each(function() {
jQuery(this).attr("href", location.href.toString()+jQuery(this).attr("href"));
});
jQuery(".tabs").tabs();

我的结论

var base=$('base').clone(true);
$("#selector").dialog({
open: function( event, ui ) {
$('base').remove(); //Delete the Basepath to solve the Problem by loading Content
$('#tabs').tabs();//Create the Tabs   
}
close: function( event, ui ) {base.insertAfter("head");
});

也许看看这个，删除基本路径，而不是创建选项卡()会非常有用，当你的选项卡工作完成时，你必须将其附加回头部

使用base属性只是为了使选项卡工作。太多了

另一个破解方法：

element.tabs({
create: function(event, ui){
var tabsData = $(event.target).data('ui-tabs');
tabsData.anchors.each(function(idx, anchor){
var contentId = $(anchor).attr('href');
var $panel = $(tabsData.panels[idx]);
$panel.html($(contentId).remove().html());
});
},
beforeLoad: function(event, ui){
event.preventDefault();
}
});

用jQuery UI - v1.11.1测试

我绝不是JS程序员，更像是Windows上的C++/C#，在帮助一位亲戚在Joomla上的网站时发表了这篇文章，他在那里遇到了类似的问题，但多亏了MV到bug项目的链接，解决方案很简单。底线-您不能使用"local"href=，所以。。不要使用它们，例如page服务器上的mypage.htmlhttp://www.example.com代码而非原始代码：

<div id="productTabs">
<ul>
<li><a href="#tabDescription">Description</a></li>
<li><a href="#tabSpecs">Specifications</a></li>
<li><a href="#tabReviews">Reviews</a></li>
<li><a href="#tabDownloads">Downloads</a></li>
</ul>
<div id="tabDescription">test</div>
<div id="tabSpecs">test</div>
<div id="tabReviews">test</div>
<div id="tabDownloads">Sorry, no downloads available for this product.</div>
</div>

您应该使用：

<div id="productTabs">
<ul>
<li><a href="http://www.example.com/mypage.html#tabDescription">Description</a></li>
<li><a href="http://www.example.com/mypage.html#tabSpecs">Specifications</a></li>
<li><a href="http://www.example.com/mypage.html#tabReviews">Reviews</a></li>
<li><a href="http://www.example.com/mypage.html#tabDownloads">Downloads</a></li>
</ul>
<div id="tabDescription">test</div>
<div id="tabSpecs">test</div>
<div id="tabReviews">test</div>
<div id="tabDownloads">Sorry, no downloads available for this product.</div>
</div>

一切都会好起来的。当然，如果你使用一些代码生成，比如Joomla中的PHP，那么放example()会变得更容易代码生成中的echo JUri::getInstance() . '#tab<Name>'

相关内容

最新更新

热门标签：