changing location.hash with jquery ui tabs

Question

I've been trying to find a way to change the window.location.hash to the currently selected tab in Jquery UI Tabs.

I've tried:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) { 
window.location.hash = ui.tab;
})

This results in changing the hash to #undefined when the tab is changed.

I've also tried:

$("#tabs > ul").tabs({ 
select: function(event, ui) { 
window.location.hash = ui.tab }
});

But this doesn't seem to be triggered at all.

Any help would be appreciated. Thanks.

Edit: It looks like part of my initial problem had something to do with js somewhere else interfering with this. Both the accepted answer and the other suggested answer slightly modified do work. Thanks all.

Potato

are you trying to open a link in the tab where the link clicked from ? – Anadem

No, the links I'm opening are part of the current page itself, no ajax/etc. – Potato

this is a pretty awesome demo of this technique: http://jqueryfordesigners.com/jquery-tabs/ – Piteous

Is there a workaround that prevents the page from jumping down to that hash anchor in the page when a tab is clicked? – Kayseri

Answer 1

In your event handler function ui.tab is an anchor element. You can retrieve its hash value like this:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) { 
    window.location.hash = ui.tab.hash;
})

Does this work for you?

Ryley

Unfortunately no, I receive many ui.tab is undefined errors upon page load or tab change. – Potato

I've been trying with the demo that appears on the doc page and works fine with FF 3 and IE 7. Are you triggering the events manually? – Ryley

I tried as you suggested with the demo page and your solution did end up working, thanks for the solution, I'll have to figure out what else in my code was stopping it from working. Thanks – Potato

If you are testing on Firefox, install the Firebug extension and put a console.trace() to track where the problems come from. – Ryley

Answer 2

$('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});

Paleozoology

Answer 3

While some of the above solutions work, they cause the page to jump around in some cases, as the window.location.hash API is designed to bring you to a specific part of the page.

This neat solution proposed here, solves that issue

  $("#tabs").bind("tabsshow", function(event, ui) { 
    history.pushState(null, null, ui.tab.hash);
  });

Cruickshank

This should probably be marked as the correct answer. – Melgar

Answer 4

This worked for me, jQuery UI 1.10:

$('#elexumaps_events_tabs').tabs({
    activate: function(event, ui) { 
       window.location.hash=ui.newPanel.selector; 
    }
});

See also: http://api.jqueryui.com/tabs/#event-activate

Oblong

this works well for me, however, I'm using ajax to load my tabs, so the hash is always "ui-tabs-1", "ui-tabs-2", etc... This means when I re-order, add, or remove tabs the bookmarks break. Do you know a way to do this where I can use custom hash names for the tabs? – Embargo

Answer 5

my simple solution without jumping:

    $("#tabs").tabs({
        activate: function (event, ui) {
            var scrollPos = $(window).scrollTop();
            window.location.hash = ui.newPanel.selector;
            $(window).scrollTop(scrollPos);
        }
    });

Hexangular

Answer 6

Would this be what you're going for?

$("#tabs > ul").tabs({ 
   select: function(event, ui) 
   { 
      window.location = "#" + ui.tab;
   }
});

Holophrastic

I tried this without any luck. I even tried putting an alert prior to the window.location setting and it doesn't appear when changing tabs. The only way I could get it to activate was by binding tabsshow but that ends up with an undefined ui.tab – Potato

When I tried using the demo code this solution slightly modified did work. The only change I would suggest is making it: window.location.hash = ui.tab.hash; – Potato

This worked as the best solution for me. Other suggestions resulted in the page jumping to the tab selected when the location hash was updated. Seconding "window.location.hash = ui.tab.hash;" in place of what is provided in the example, tho. – Consignment

Answer 7

Many of the above answers don't work with the current version of jQuery UI Tabs. Here's what I'm currently using:

var tabsUi = $('#tabs');
tabsUi.tabs();

// Add hash to URL when tabs are clicked
tabsUi.find('> ul a').click(function() {
    history.pushState(null, null, $(this).attr('href'));
});

// Switch to correct tab when URL changes (back/forward browser buttons)
$(window).bind('hashchange', function() {
    if (location.hash !== '') {
        var tabNum = $('a[href=' + location.hash + ']').parent().index();
        tabsUi.tabs('option', 'active', tabNum);
    } else {
        tabsUi.tabs('option', 'active', 0);
    }
});

Turd

Perfect solution, the only one that worked for me :) – Either

Answer 8

$('#tabs').tabs({
    select: function(event, ui){
      window.location = ui.tab.href;
    }
});

Dinger

Answer 9

My way for jQuery UI 1.10.3

$("#tabs").tabs({
   beforeActivate: function(event, ui) {
        var hash = ui.newTab.children("li a").attr("href");
        window.location.hash = hash;
   }
});

Fosque

Answer 10

I'm using a tab plugin you can find it at github: https://github.com/jquerytools/jquerytools.github.com

Alcock

Answer 11

This worked for me using Jquery 1.8

$('#tabs').tabs({
    activate: function(event, ui) {
       window.location.hash = ui.newPanel.attr('id');
    }
});

Loculus

Answer 12

After looking through some other questions and the jQueryUI API docs I found that this ended up working for me.

$(document).ready(function() {
    $("#tabs").tabs({
        activate: function( event, ui ) {
            location.hash = ui.newTab.children(".ui-tabs-anchor").attr("href").substr(1);
        }
    });
});

Usher

Answer 13

It seems like ui.tab itself doesn't return a valid string. (instead it returns undefined, so you'd say it doesn't return anything at all.)

Try looking around in the dev version of ui.jquery.js whether there are any returns there, maybe you have to call a child of ui.tab ;-)

Tenstrike

@Tenstrike you need ui.tab.index ;) – Replevy

Answer 14

This code works ok for me:

$('#tabs').tabs({
    select: function(event, ui) { 
        window.location = $(ui.tab).attr('href');
    }
});

Antares

Answer 15

This code works for me :

$("#tabs").tabs({
    activate: function(event, ui) { 
       window.location.hash=ui.newPanel.selector; 
    }
});

Pertain

Answer 16

The following code is worked for me..

$("#tabs").tabs({
   activate : function(event, ui) {
     window.location.hash = ui.newPanel[0].id;
  }
});

Almeta

Answer 17

My working solution.

jQuery v3.5.1, jQuery UI v1.12.1

$(".detail-groups").tabs({ activate: function(event, ui) {
                            window.location.hash = ui.newPanel[0].id;
                         }
                    });

Athey

Answer 18

This piece of code worked for me:

window.location.hash="";

Orland