javascript - 带有 jquery ui 选项卡的 MVC 4

Question

我正在尝试使用下面的代码在 mvc 项目中创建一个 jquery 选项卡，但它不起作用。请指教我错过了什么？我正在使用 jqueryui site 中的示例代码

View :

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>

 <script>
    $(function () {
    $("#tabs").tabs();
});
</script>


 <div id="tabs">
  <ul>
    <li><a href="#tabs-1">login</a></li>
    <li><a href="#tabs-2">Register</a></li>        
  </ul>
 <div id="tabs-1">
    @Html.Partial("_login")
 </div>
 <div id="tabs-2">
    @Html.Partial("_register")
 </div>

我的布局中还有两个链接“登录”和“注册”链接 我该如何管理，所以当单击登录链接时显示 tabs-1，当单击注册链接时显示 tabs-2

当我运行代码时，输​​出结果不起作用:

谢谢

Answer 1

<div id="tabs">
 <ul>
<li><a href="#tabs-1">Login</a></li>
<li><a href="#tabs-2">Create An Account</a></li>
 </ul>
 <div id="tabs-1">
     @Html.Partial("_Login", Model.LoginModel)
</div>
<div id="tabs-2">
      @Html.Partial("_Register", Model.RegisterModel)

</div>
</div>

<script type="text/javascript">
   $( "#tabs" ).tabs();
});
</script>

型号:

public class MainViewModel
{
    public LoginViewModel LoginModel { get; set; }

    public RegisterViewModel RegisterModel { get; set; }
}

MainView 的 Controller 操作:

 public ActionResult MainView()
    {

        MainViewModel model = new MainViewModel
        {
            LoginModel = new LoginViewModel(),
            RegisterModel = new RegisterViewModel()
        };

        return View(model);
    }