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.

are you trying to open a link in the tab where the link clicked from ? — Barbaros Alp, Feb 20 '09 at 16:41
No, the links I'm opening are part of the current page itself, no ajax/etc. — Rob, Feb 20 '09 at 16:58
this is a pretty awesome demo of this technique: [http://jqueryfordesigners.com/jquery-tabs/](http://jqueryfordesigners.com/jquery-tabs/) — , Jul 22 '10 at 18:32
Is there a workaround that prevents the page from jumping down to that hash anchor in the page when a tab is clicked? — Barry Chapman, Jul 06 '12 at 08:17

score 49 · Accepted Answer · answered Feb 20 '09 at 17:16

49

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?

answered Feb 20 '09 at 17:16

Serxipc

6,639
9
40
51

1

Unfortunately no, I receive many ui.tab is undefined errors upon page load or tab change. – Rob Feb 20 '09 at 17:39
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? – Serxipc Feb 20 '09 at 18:19
1

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 – Rob Feb 21 '09 at 03:01
If you are testing on Firefox, install the Firebug extension and put a console.trace() to track where the problems come from. – Serxipc Feb 21 '09 at 11:07

score 25 · Answer 2 · answered Oct 19 '10 at 13:46

25

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

answered Oct 19 '10 at 13:46

Herman van der Meulen

251
3
2

score 14 · Answer 3 · answered Oct 05 '12 at 17:44

14

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

answered Oct 05 '12 at 17:44

n8vision

364
2
5

This should probably be marked as the correct answer. – wblaschko Oct 24 '14 at 18:01

score 8 · Answer 4 · answered Feb 28 '13 at 12:04

8

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

answered Feb 28 '13 at 12:04

romaninsh

10,606
4
50
70

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? – Billkamm Sep 19 '13 at 18:50

score 7 · Answer 5 · answered Feb 17 '14 at 15:42

my simple solution without jumping:

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

score 4 · Answer 6 · answered Jun 19 '13 at 12:35

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

Perfect solution, the only one that worked for me :) – Rafael Capucho Oct 07 '13 at 01:46 — Rafael Capucho, Oct 07 '13 at 01:46

hunter · Answer 7 · 2011-11-02T22:10:14.187

4

Would this be what you're going for?

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

edited Nov 02 '11 at 22:10

answered Feb 20 '09 at 16:52

hunter

62,308
19
113
113

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 – Rob Feb 20 '09 at 17:00
1

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; – Rob Feb 21 '09 at 03:03
1

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. – Michael Reed Mar 01 '11 at 21:01

score 3 · Answer 8 · answered Sep 23 '13 at 11:39

3

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

answered Sep 23 '13 at 11:39

QuiGonJin2

31
2

score 3 · Answer 9 · edited Jun 24 '12 at 20:46

3

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

edited Jun 24 '12 at 20:46

RSK

17,210
13
54
74

answered May 09 '09 at 14:43

score 1 · Answer 10 · answered Oct 31 '13 at 20:46

1

This worked for me using Jquery 1.8

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

answered Oct 31 '13 at 20:46

Andrew

203
2
10

score 1 · Answer 11 · answered Jan 12 '15 at 19:54

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

FDisk · Answer 12 · 2015-02-19T20:35:30.207

1

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

edited Feb 19 '15 at 20:35

answered Sep 27 '10 at 09:18

FDisk

8,493
2
47
52

score 0 · Answer 13 · answered Feb 05 '14 at 12:43

0

This code works ok for me:

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

answered Feb 05 '14 at 12:43

pucheta

1

score 0 · Answer 14 · edited Mar 23 '16 at 09:35

0

This code works for me :

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

edited Mar 23 '16 at 09:35

Michaël Azevedo

3,874
7
31
45

answered Mar 23 '16 at 09:18

Gabriel-Antoine Brouze

1
1

score 0 · Answer 15 · answered Feb 07 '17 at 04:45

0

The following code is worked for me..

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

answered Feb 07 '17 at 04:45

Sunil Singh Bora

771
9
24

score 0 · Answer 16 · answered Jun 03 '20 at 12:17

0

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

answered Jun 03 '20 at 12:17

Zdeněk Dušátko

328
2
8

score 0 · Answer 17 · answered May 20 '09 at 15:07

0

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

answered May 20 '09 at 15:07

@Fabdrol you need ui.tab.index ;) – vvohra87 Aug 13 '11 at 11:58

score -1 · Answer 18 · edited Jul 11 '14 at 12:11

-1

This piece of code worked for me:

window.location.hash="";

edited Jul 11 '14 at 12:11

Arend

3,741
2
27
37

answered Jul 11 '14 at 11:14

kapil

1,710
1
15
12

changing location.hash with jquery ui tabs

18 Answers18

Linked