MVC3 JQuery选项卡

时间:2012-11-01 20:27:29

标签: asp.net-mvc-3 jquery-ui jquery

我正在尝试使用包含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。以及放置此代码的位置。是在这个主视图还是部分视图中?

1 个答案:

答案 0 :(得分:0)

解决评论中更具体的问题

要从按钮中打开标签2,请单击标签1:

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