jQuery UI 选项卡未呈现答案

【问题标题】：jQuery UI tabs not renderingjQuery UI 选项卡未呈现
【发布时间】：2011-03-12 04:20:17
【问题描述】：

我没有收到以下代码的 javascript 或标记错误，但我也没有看到任何选项卡

[_Layout.cshtml]

<html>
<head>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/_Layout.js")" type="text/javascript"></script>
</head>

感谢任何帮助。

谢谢。

<body>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
    </ul>
    <div id="tabs-1">
        <p>Tab 1 content</p>
    </div>
</div>
</body>
</html>

[_Layout.js]

$(document).ready(function () {
    $("#tabs").tabs();
});

[索引.cshtml]

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>

生成的html：

<!DOCTYPE html>

<html>

<head>

    <title>Home Page</title>

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script>

    <script src="/Scripts/_Layout.js" type="text/javascript"></script>

</head>



<body>

    <div class="page">

        <div id="header">

            <div id="title">

                <h1>My MVC Application</h1>

            </div>

         <br />

    <div id="tabs">

       <ul>

          <li><a href="#tabs-1">Nunc tincidunt</a></li>

       </ul>

       <div id="tabs-1">

          <p>Tab 1 content</p>

       </div>

    </div>



        <div id="main">



<h2>Welcome to ASP.NET MVC!</h2>

<p>

    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.

</p>



            <div id="footer">

            </div>

        </div>

    </div>

    </div>

</body>

</html>

为了完整起见，我忘了包含 jquery ui css 文件：

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />

谢谢@保罗

【问题讨论】：

您能告诉我们生成的实际标记吗？
我不熟悉@URL.Content，但您能确认这些脚本正在加载吗？
@Trevor：是的，它们显示在 chrome 开发工具栏的资源部分下。没有丢失资源错误。
您是否包含 jQuery UI CSS 主题？？
@Trevor - Paul 是对的，我应该说标签已呈现，但缺少样式。我的错。

标签： jquery jquery-ui asp.net-mvc-3 razor

【解决方案1】：

尝试将此添加到您的 head 标签中：

<link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />

【讨论】：