MVC3 JQuery Tabs - asp.net-mvc-3

Question

I am trying to create a page with three tabs containing 3 partial views.
Main View that hosts the tabs.
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
<div id="tabs" style="display:inline; float:inherit">
<ul>
<li>#Ajax.ActionLink("Tab name1","ActionMethod1","ControllerName",new AjaxOptions{UpdateTargetId="div1"})</li>
<li>#Ajax.ActionLink("Tab name2","ActionMethod2","ControllerName",new AjaxOptions{UpdateTargetId="div2"})</li>
<li>#Ajax.ActionLink("Tab name3","ActionMethod3","ControllerName",new AjaxOptions{UpdateTargetId="div3"})</li>
</ul>
</div>
<div id=div1></div>
<div id=div2></div>
<div id=div3></div>
I have created next button in tab1 and tab2 and submit button in tab3.
Please give the code to open tab2 from tab1 on button(next) click. and where to put this code. Is it in this main view or the partial views?

Answer 1

Addressing the more specific question from your comment
To open tab 2 from a button click in tab 1:
Html (Standard markup for jQuery tabs):
<div id="tabs">
<ul>
<li><a id="tab1" href="#tabs-1">Tab One</a></li>
<li><a id="tab2" href="#tabs-2">Tab Two</a></li>
<li><a id="tab3" href="#tabs-3">Tab Three</a></li>
</ul>
<div id="tabs-1>
<button type="button" id="GotoTab2">Next</button>
</div>
<div id="tabs-2">
<!-- some content -->
</div>
jQuery
$(function () {
$("#tabs").tabs();
$('#GotoTab2').click(function () {
$('#tab2').click();
});
});