Tab selection using jQuery in MVC

Question

I have four tabs set in my view as follows

<ul>
    <li><a id="#tabs-1">Case Summary</a></li>
    <li><a id="#tabs-2">Patient</a></li>
    <li><a id="#tabs-3">Physician</a></li>
    <li><a id="#tabs-4">Site</a></li>
    <li><a id="#tabs-5">Journal</a></li>
</ul>

What i need to do is, be able to have focus on the tag my controller action requires say by sending viewdata("TabSelected") = "tabs-3" for Physician info

Answer 1

This is much simpler if you're using jQuery UI tabs. jQuery UI is a fully supported set of widgets for creating an UI on the client side. One of the widgets provided is a tab widget.

Assuming you're using this, you can do something as simple as this:

On the controller action:

ViewData("SelectedTabIndex") = 1;

On the client side, in $(document).ready:

$('#myTabs').tabs({ selected: <%= ViewData["SelectedTabIndex"] %> });

Answer 2

After putting the tabselected in the viewdata like so:

ViewData("TabSelected") = "tabs-3"

Simply put the following in your $(document).ready() function:

$('#<%=ViewData("TabSelected")%>').focus()

That should do it.