jquery - jQuery UI 选项卡加载锚”，以 href 形式给出

Question

我有一个奇怪的行为，我的标签会重新加载页面 #anchor-name，它是作为 href 给出的。不知道为什么，因为我还没有设置通过 ajax 获取内容。所有内容都在带有正常标记的页面上，但 thbs 对 domain/#ui-tabs-1 中的内容进行了分级

如果我在没有 # 的情况下设置了 href，我会在控制台中的 get 请求中看到 404 错误。

jQuery 和 jQuery UI 都是实际版本。

有没有人意识到这种行为？

Answer 1

在标题中设置基本标签似乎是一个问题。

<base href="...">

根据我发现的一些非常古老的 JQuery 选项卡文档，如果您将选项卡链接的 url 设置为普通 URL 而不是锚点，它将通过 AJAX 加载选项卡内容，就像这里发生的那样（即使我们实际上有锚点）。

现在，如果您设置基本路径，浏览器可能会认为您必须进行真正的加载，因为锚链接与新的 bas 路径冲突......不确定浏览器为什么会这样认为。

但是，如果您删除基本标签，一切都会按预期工作。

FF中的错误？

见这里：http: //forum.jquery.com/topic/problem-with-jquery-ui-tabs-and-base-tag

Answer 2

要使其与基本标记一起使用，请将其放入您的 javascript 中：

$.fn.__tabs = $.fn.tabs;
$.fn.tabs = function (a, b, c, d, e, f) {
    var base = location.href.replace(/#.*$/, '');
    $('ul>li>a[href^="#"]', this).each(function () {
        var href = $(this).attr('href');
        $(this).attr('href', base + href);
    });
    $(this).__tabs(a, b, c, d, e, f);
};

Answer 3

<div id="c2" class="csc-default">
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul id="tab-menu" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">

            <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="ui-tabs-1" aria-labelledby="ui-id-1" aria-selected="true">
                <a href="ui-tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Übersicht<span class="squares"></span></a>
            </li>


            <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-2" aria-labelledby="ui-id-2" aria-selected="false">
                <a href="ui-tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Features<span class="squares"></span></a>
            </li>


            <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-3" aria-labelledby="ui-id-3" aria-selected="false">
                <a href="ui-tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Service<span class="squares"></span></a>
            </li>


    </ul>

        <div id="ui-tabs-1" aria-live="polite" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" style="" aria-expanded="true" aria-hidden="false">
            <section>
                ...
            </section>
        </div>

        <div id="ui-tabs-2" aria-live="polite" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" style="" aria-expanded="true" aria-hidden="false">
            <section>
                ...
            </section>
        </div>

        <div id="ui-tabs-3" aria-live="polite" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" style="" aria-expanded="true" aria-hidden="false">
            <section>
                ...
            </section>
        </div>


</div>

这就是JS：

  jQuery('#tabs').tabs({
show: { effect: "fade", duration: 200 },
hide: { effect: "fade", duration: 200 },
spinner: false,
create: function( event, ui ) {
  jQuery('H1').addClass('tab-heading');
},
beforeActivate: function( event, ui ) {
  $('.layout-2 .column-right').height('auto');
  $('.layout-2 .column-right article').height('auto');
},
activate: function( event, ui ) {
  var heightLeft = $('.layout-2 .column-left').height();
  var heightRight = $('.layout-2 .column-right').height();
  if (heightRight < heightLeft) {
    $('.layout-2 .column-right').height(heightLeft);
    $('.layout-2 .column-right article').height(heightLeft - 80);
  };
}

});