pass querystring value to open relevant jquery tab on naext page

Question

i have a link on page 1 with querystring href="page2.html?selected=1".

What i want is when i click on this link on page 1 then it should navigate to page 2.html and use this querystring value to open particular jquery tab(using jquery tabs)??

Function is as follows:

$(function selectTab(indexId){
    var activeTab = location.href;
    var activeTabId = activeTab.substring(activeTab.lastIndexOf('=') + 1);
    $('#tabs').tabs('select', indexId);
})

Please tell me how can i resolve this issue??

Answer 1

You can do it this way, but your variables are mixed up, it would just be:

$(function selectTab(){
    var activeTab = location.href;
    var activeTabId = activeTab.substring(activeTab.lastIndexOf('=') + 1);
    $('#tabs').tabs('select', activeTabId);
})

However, there's already built-in support for this, just use a URL like this:

page2.html?#tabPanelID

For example if the tab has a link of href="#tab3" that goes to a <div id="tab3"> then your URL would be page2.html#tab3, check out this link: http://jqueryui.com/demos/tabs/#tabs-3

See how it opens directly to the third tab in the demo? that's the built-in behavior.

Answer 2

Try this way... I know it s a bit long winded but at least you can see each stage of how JS Tabs is implemented.

Add a telltale to your string once the page reloads... I have done tab222.

Then ID your tab content div's i have done #tab_2

change the menu tag href to what you have...

$(document).ready(function(){

  if (/tab222/.test(self.location.href)) {
    $('#p_tabs li').removeClass('active');
    $('#p_tabs li a[href="#tab_2"]').parent().addClass('active');
    $('#tab_one').removeClass('active');
    $('#tab_two').addClass('active');
  };

});

vwala! Hope that helps.