changing location.hash with jquery ui tabs

问题

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.

回答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?

回答2:

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

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

回答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

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

回答6:

Would this be what you're going for?

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

回答7:

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

回答8:

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

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

回答10:

This worked for me using Jquery 1.8

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

回答11:

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

回答12:

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

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

回答14:

This code works ok for me:

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

回答15:

This code works for me :

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

回答16:

The following code is worked for me..

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

回答17:

This piece of code worked for me:

window.location.hash="";

来源：https://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui-tabs