Question

I have some jQuery UI tabs in ASP.NET web form. Everything works OK, but by default the first tab is opening.

I am executing some code in a modal popup and when the user clicks the action button, I want the postback to be in the tab from which the popup was triggered.

This is the jQuery UI tabs code:

<ul>
    <li><a href="#tabs-1">Tab1</a></li>
    <li><a href="#tabs-2">Tab2</a></li>
    <li><a href="#tabs-3">Tab3</a></li>
</ul>
<div id="tabs-1">   
</div>
<div id="tabs-2">           
</div>
<div id="tabs-3">  
</div>

I want to know how can I select which tab to be opened by default when page is loaded, for example if I have in the query string:

mypage.aspx?tab=1 or mypage.aspx?tab=2

Some other example might work better.

Answer 1

Use the getParameterByName function from this question to get the value:

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

Then do something like this:

$("#tabs").tabs({
    create: function(event, ui){
       var index = parseInt(getParameterByName("tab"));
       $(this).tabs("option", "active", index);
    }
}); 

Links:

• http://api.jqueryui.com/tabs/#option-active