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

我的布局中也有两个链接＆＃34;登录＆＃34;和＆＃34;注册＆＃34;链接如何管理，点击登录链接时显示选项卡-1，单击注册链接时显示选项卡-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/