jQuery UI Tabs load anchor" which is given as href

Question

I have the weird behavior that my tabs relkoad the page #anchor-name which is given as href. Don't know why because I have not set up to get contents via ajax. All content is on page with normal Markup but the thbs grad the content from domain/#ui-tabs-1

if I set up the href without the # I see a 404 error from a get request in the console.

jQuery and jQuery UI are both in actual versions.

Does anybody ever realized this behavior?

Answer 1

To get this working with a base tag, put this in your 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 2

It seems to be a problem with setting a base tag in your header.

<base href="...">

According to some very old JQuery tabs documentation I found, if you set the url of the tab links to normal URLs and not anchors, it will load the tabs content via AJAX, as is happening here (even if we actually had anchors).

Now if you set a base path, the browser might think you have to do a real load as the anchor link conflicts with the new bas pasth ... Not sure why the browser thinks that.

But if you remove the base tag, all works as intended.

Bug in FF ?

See here: http://forum.jquery.com/topic/problem-with-jquery-ui-tabs-and-base-tag

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>

And thats the 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);
  };
}

});