CODEWITHSUNDEEP
jqueryjquery-ui
stoic
stoic

Reputation: 4830

Change Selected tab of jQuery UI tabs

The question has been asked a few times before, but none of them are similar to my scenario.

I have jQuery Tabs control that loads my tabs via ajax:

<div id="tabs">
<ul>
    <% if (AccessControll.HasAccess(Url.Action("ViewSchemeInformation","Scheme"))){%>
        <li><a id="tab_1" href="<%= Url.Action("ViewSchemeInformation","Scheme", new {schemeNumber = Model.SchemeNumber}) %>">Information</a></li>
    <%}%>
    <% if (AccessControll.HasAccess(Url.Action("SchemeUpdate", "Scheme"))){%>
        <li><a id="tab_2" href="<%= Url.Action("SchemeUpdate","Scheme", new {schemeNumber = Model.SchemeNumber}) %>">Update</a></li>
    <%}%>
    <%if (AccessControll.HasAccess(Url.Action("MinimumRequirements","Scheme"))){%>
        <li><a id="tab_3" href="<%= Url.Action("MinimumRequirements","Scheme", new {schemeNumber = Model.SchemeNumber}) %>">Minimum Requirements</a></li>
    <%}%>
</ul>

These tabs are shown based on access, so my tab index's are never the same, hence I have added an id to each href.

I link to this specific page from various places and each link must go to this page and select the tab it refers to.

My url will look something like this: http://localhost:34412/Scheme/ViewSchemeDetails/BS-000469800000?activeTab=1

How can I select the tab using jQuery based on the activeTab parameter in my querystring?

Note that number in the querystring always corresponds to the id of my href.

Upvotes: 5

Views: 6289

Answers (2)

Onaga
Onaga

Reputation: 21

tabs_object.tabs('widget').tabs("option", 'selected', 2);

in your case

tabs_object.tabs('widget').tabs("option", 'selected', activeTab);

Upvotes: 2

David Tang
David Tang

Reputation: 93664

Get the query string:

var queryString = window.location.search;

Get the activeTab part:

var activeTab = queryString.match(/\bactiveTab=([^&]*)/)[1];

Select the tab with the right ID:

$('#tab_' + activeTab).click();

Upvotes: 8

Related Questions