Question

我有一个奇怪的行为，我的标签重新定位页面＃anchor-name，它是以href形式给出的。不知道为什么，因为我没有设置通过ajax获取内容。所有内容都在正常标记的页面上，但是thbs从域中删除内容/＃ui-tabs-1

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

jQuery和jQuery UI都是实际版本。

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

Answer 1

在标题中设置基本标记似乎有问题。

<base href="...">

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

现在，如果你设置一个基本路径，浏览器可能会认为你必须做一个真正的负载，因为锚链接与新的bas pasth冲突...不确定浏览器为什么会这么想。

但如果删除基本标记，则所有内容都按预期工作。

FF中的错误？

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

Answer 2

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

}）;

Answer 3

使用基本标记实现此解决方案的解决方案就是将其放在您的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);

};

jQuery UI Tabs加载锚“以href形式给出

3 个答案: