asp.net-mvc-3 - MVC3 JQuery 选项卡

Question

我正在尝试创建一个包含三个选项卡的页面，其中包含 3 个部分视图。承载选项卡的主视图。

<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>

我在 tab1 和 tab2 中创建了下一个按钮，并在 tab3 中创建了提交按钮。

请提供代码以在按钮（下一步）单击时从 tab1 打开 tab2。以及在哪里放置此代码。是在这个主视图中还是在部分视图中？

Answer 1

从您的评论中解决更具体的问题

要从按钮打开选项卡 2，请单击选项卡 1：

Html（jQuery 选项卡的标准标记）：

<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();
        });
    });