带有 jquery ui 选项卡的 MVC 4

Question

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

观点：

<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 的控制器操作：

 public ActionResult MainView()
    {

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

        return View(model);
    }

Answer 2

我认为您的 jquery 和 UI 库不兼容。两者都应该是更新版本。

要弄清楚，只需用 cdn 中的 jquery ui 1.9.1 版本替换现有的 ui 库。

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

但是，您应该同时使用两个更新版本。

更新

您可以在这里看到您的代码运行良好。 http://jsfiddle.net/Gay2V/