21

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

非常感谢

4

7 回答 7

30

你是对的，它是 BASE 元标记。这是您在使用最新版本的 jQuery UI (1.9) 时会遇到的问题，它适用于 1.8。Tabs API 进行了很多更改，但在您检查 jQuery 源代码之前，似乎没有什么会导致此问题。

  1. BASE 元标记指示浏览器将选项卡中的 href 属性（您用作选项卡内容的参考）从 hash+id 转换为完整的 URL（使用您的 BASE 标记值）。这是预期的行为。
  2. 以前版本的选项卡 UI 会努力猜测 href 是否真的是远程的，拆分 href 选项卡值，然后将其与当前 URL和BASE 标记进行比较，然后确定它是否真的是本地的。
  3. 最新版本的 jQuery 不检查 BASE 标记值。
  4. 因此，最新版本与 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 元标记值）。

到目前为止，我还没有找到任何方法来使用普通的选项卡 API 告诉选项卡“这是本地的，不要使用 Ajax”。我可以为您提供的是我在此期间为快速修复它所做的事情（当我询问、重新检查并可能填写错误报告时）：一个 hack。

    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）。对我来说这不是问题，因为我的大多数应用程序都在 Intranet 中使用。

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

更新：我发现了这个错误报告（有几个重复）：http ://bugs.jqueryui.com/ticket/7822 我很想添加我自己的评论，但似乎 jQuery 开发人员不会“修复”他们认为问题出在其他地方。来自 bugtracker 的引用：

我不明白这是如何修复的...

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

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

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

于 2012-12-31T15:51:25.057 回答
20

这是一个简单的解决方法，适用于您的 .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();
于 2013-04-19T17:25:25.960 回答
7

正如@MV 提到的，问题在于 jquery 混淆了我网页顶部的基本标记。因此，我没有编辑 jQuery ui 文件女巫不在我的选项中，而是像这样使用 jQuery 删除了基本标记

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

这似乎对我有用，因为我不介意为了该特定页面上的标签控制而临时删除基本标签。但是我也在考虑一种解决方案，以防万一需要这些定义，例如将这些基本标签收集到一个数组中，删除它们，然后在执行 tabs() 方法后，再次添加它们，这看起来有点 st..id 但应该可以工作tabs() 没有实现任何监听器模式。我还没有尝试过，我还不会。无论如何，看起来 jQuery ui 确实有一个错误！

于 2013-06-29T21:34:56.250 回答
2

当归的答案对我有用。我在 requirejs 文件中将它用于任何将“选项卡”类作为选项卡选择器的页面。

jQuery(".tabs ul li a").each(function() {
    jQuery(this).attr("href", location.href.toString()+jQuery(this).attr("href"));
});
jQuery(".tabs").tabs();
于 2015-02-16T23:55:36.643 回答
0

我的结论

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

也许看看这个，删除基本路径会很有帮助，而不是创建你的 tabs()，当你的 tabs 工作完成后，你必须追加到 head

于 2014-02-07T08:18:54.150 回答
0

弄乱base属性只是为了使标签工作。太多了

另一个hacky解决方法：

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

于 2014-10-14T11:18:49.023 回答
0

我绝不是 JS 程序员，更多的是 Windows 上的 C++/C#，在帮助一位亲戚在 Joomla 上的网站上遇到了类似的问题，但由于MV链接到错误项目，解决方案很简单。底线-您不能使用“本地” href= ，所以..不要使用它们，例如对于 服务器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>'放入代码生成中会变得更加容易

于 2019-03-16T19:26:43.413 回答