Question

我是jquery的新手，正在尝试使用UI插件。出于某种原因，以下代码不起作用，从某种意义上说，它不会呈现选项卡，而只是一堆文本。但是当我复制页面源并将其粘贴到html页面中并将其放在views文件夹中时，一切看起来都很棒，所以，我认为所有的js路径都很好。有什么想法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Details</title>
    <link href="../../Scripts/themes/base/ui.all.css" rel="stylesheet" type="text/css" /> 
    <script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>  
    <script src="../../Scripts/ui/ui.core.js" type="text/javascript"></script>
    <script src="../../Scripts/ui/ui.tabs.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#tabs").tabs();
        });    
 </script>
</head>

<body>
    <div>

    <div id="tabs">
     <ul>
      <li><a href="#tabs-1">Text 1</a></li>
      <li><a href="#tabs-2">Text 2</a></li>
      <li><a href="#tabs-3">Text 3</a></li>
     </ul>
     <div id="tabs-1">
           <div>tab1 content - adsfadfadsf</div>     
     </div>
     <div id="tabs-2">
         <div>tab 2 content -adfadfadf </div>     
     </div>
     <div id="tabs-3">
         <div>tab 3 content -adfadfadfadf</div>      
     </div>
    </div>   
    </div>
</body>
</html>

Answer 1

首先始终是相对路径的“〜/”表示法，这将避免在部署到虚拟文件夹时出现问题。您也可以自己编写一个帮助程序来封装它：

<script src="<%= Url.Content("~/Scripts/script.js") %>"></script>

你在MvcContrib中有很好的助手，比如

Html.Script("~/Script/js-debug.js", "~/Script/js-prod.js");

你的css会出现同样的问题：

Html.Css("~/Content/style.css");

我在我的最新项目中使用它并且我在那里看不到编程错误，所以我认为在脚本路径中你有效地存在问题。

此外，使用Firebug非常容易并检查你得到的js错误，如果脚本全部加载等等......

最后，最好将所有js代码放在html页面的末尾（就在标记之后。这不是必需的，但有助于加快页面加载，因为脚本将在页面被解析后下载）浏览器。

Answer 2

除了这些脚本文件的路径之外，我看不到您的代码有什么问题。在ASP.NET MVC视图中，在使用url时使用html帮助是一个好习惯：

<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>"></script>

Answer 3

所以我假设所有的js路径都很好

你的假设大多是错误的。如果/ Action被渲染并使用/Views/Action/Index.aspx视图，则动作的相对路径与您直接显示/Views/Action/Index.html时的路径不同。

所以请使用类似

的内容

<script src="<%= Url.Content("~/Content/js/jquery-1.2.3.min.js") %>" type="text/javascript"></script>

在ASP.NET MVC中使用Jquery UI Tab控件

3 个答案: