Highlighting the selected jquery tab using asp.net Master page.

Question

Hi everyone, I am using jquery tabs(First,Second,Third) in multiple asp.net pages (First.aspx, second.aspx,Third.aspx) in my asp.net website and in each page i am writing the ul,li code. For example in the First.aspx page I am writing the following code inside the 'ul' tag

<li class="current"><a href="#First">First tab</a></li>
 <li><a href="Second.aspx">Second tab</a></li>
 <li><a href="Third.aspx">Third tab</a></li>

Similarly in the second.aspx,Third.aspx pages i am using the Class="current" to highlight the selected tab.Recently we have planned to move to Master pages.So the master page should contain the ul,li code for the tabs.But the problem is that I do not understand how to apply the class="current" to the selected tab,in the case of the master page.Could someone please help?

Thanks in advance.

Answer 1

Write a javascript function in your master page to set the current class on a tab. Each page can then call that function when it's loaded to set the current page.

Something like:

<li id='tab1'><a href="#First">First tab</a></li>
<li id='tab2'><a href="Second.aspx">Second tab</a></li>
<li id='tab3'><a href="Third.aspx">Third tab</a></li>


function setCurrentTab(selectedTab) {
    $('li').removeClass('selected');
    $('[id=selectedTab]').addClass('selected');
}

and in Second.aspx, for example:

setCurrentTab('tab2');

Answer 2

Could you please specify where the below code should be put in Second.aspx

setCurrentTab('tab2');