Question

jQuery Tabs存在很大问题。

我正在尝试在我的网站产品页面上加载标签... 当页面加载时，我看到标签内容为第二个（标准html选项卡不是ajax）然后突然我的整个网站加载在选项卡内。

我正在使用jquery ui标签演示页面中的标准代码。

<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，只是想知道是否有人之前已经看过这个。

非常感谢

Answer 1

你是对的，它是BASE元标记。这是最新版本的jQuery UI（1.9）会遇到的问题，它适用于1.8。 Tabs API有很多变化，但在检查jQuery源代码之前似乎没有任何问题。

BASE元标记指示浏览器将标签中的href属性（用作标签内容的参考）从hash + id转换为完整URL（使用BASE标记值）。这是预期的行为。
Tabs UI的早期版本会尽量猜测href是否真的是远程的，拆分href选项卡值，然后将其与当前URL AND 与BASE标记进行比较，然后决定它是否真的是本地的。
最新版本的jQuery不会检查BASE标记值。
因此，当与BASE元标记一起使用时，最新版本将尝试使用Ajax加载标签内容，重新加载自身（或BASE URL中的任何内容）。

这是版本1.8.24中使用的jQuery UI选项卡：

    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 Tabs在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开发人员不会“修复”这个问题，因为他们认为问题出在其他地方。引自bugtracker：

我不明白这是多么重要的修复......

这是一个简单，动态的PHP实现：'http：//'。 $ _SERVER ['HTTP_HOST']。 $ _SERVER ['REQUEST_URI']。 '#foo'。

在JavaScript中修复此问题也相当简单，但我不会提供示例代码，因为这是修复此问题的错误位置，应该非常劝阻。链接的行为在所有浏览器中都是明确定义和一致的。人们绝对没有理由使用不正确的URL，然后在JavaScript中乱砍它们。

最后，重要的是要注意“修复”这意味着为正确使用的每个人打破正确的行为。请记住，这是固定的，因为具有正确URL的人遇到了旧代码中存在的真正错误。

Answer 2

这是一个简单的解决方法，适用于.js，因此您可以将第三方副本用于jquery.ui。
使用Jquery UI 1.10.2进行测试解决基本元标记问题以及可选的尾部斜杠n url的问题。

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

Answer 3

正如@MV所提到的，问题是jquery在我的网页上混淆了基本标签。因此，我没有在我的选项中编辑jQuery ui文件，而是使用jQuery删除基本标记

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

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

Answer 4

Angelica的答案对我有用。我在requirejs文件中使用了这个类，其中任何一个页面都带有类＆＃39;标签＆＃39;作为标签的选择器。

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

Answer 5

我的结论

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");
});

也许看看这个删除基本路径非常有帮助，而不是创建你的标签（），当你完成标签的工作时，你必须追溯到头部

Answer 6

与base属性混淆只是为了使标签正常工作。它太多了

另一个hacky解决方法：

＆＃13;

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();
  }
});

＆＃13;

使用jQuery UI - v1.11.1

进行测试

Answer 7

我绝不是JS程序员，而是Windows上的更多C ++ / C＃，在帮助一位亲戚在Joomla的网站上遇到亲戚时也遇到了类似的问题。链接到错误项目，解决方案很简单。底线-您不能使用“ local” href =，因此..请勿使用它们，例如page http://www.example.com 服务器上的 mypage.html 而不是原始代码：

<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>'在代码生成中

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

7 个答案: