2010-07-17 52 views
0

HI,
我是新来的JQuery。我在执行相同的问题。我想使用JQuery自定义主题中的选项卡。问题是,CSS似乎并不适用。我在谷歌上经历了很多博客等,但似乎没有任何效果。在ASP.Net MVC2实施JQuery用户界面1.8.2自定义主题

我遵循的是提here

我也粘贴的Site.Master的内容和/home/index.aspx这里。

的Site.Master - 标题部分看起来像这样

<link href="../../Content/Site.css" rel="stylesheet" type="text/css"/> 
<link href="../../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> 
<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"> 
</script> 
<script src="../../Scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>` 

的Index.aspx:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> 

首页

</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script type="text/javascript"> 
    // Tabs 
    $('#tabs').tabs();</script>` 
<h2 class="demoHeaders"> 
Tabs</h2> 
<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">First</a></li> 
     <li><a href="#tabs-2">Second</a></li> 
     <li><a href="#tabs-3">Third</a></li> 
    </ul> 
    <div id="tabs-1"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
     exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> 
    <div id="tabs-2"> 
     Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet 
     ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum 
     bibendum. </div> 
    <div id="tabs-3"> 
     Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi 
     urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor 
     ullamcorper augue. </div> 
</div> <h2> 
    <%: ViewData["Message"] %></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> 

任何人都可以发现任何明显的错误?

提前许多感谢, jankajg

+0

你好,jQuery的1.8.2版本???目前的版本仍然是1.4.2恐怕...或者你的意思是jQuery UI?他们是不同的东西:) – 2010-07-17 05:26:41

+0

我谈论jQueryUI的 – jankajg 2010-07-17 05:57:48

回答

0

你的初始化标签早。在运行脚本时,tabs元素还没有被解析,检查这个的一种方法是始终检查jquery对象的.length属性,以确保在id为1的情况下。

要修复:要么包裹脚本在document ready statement

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

</script> 

或只是closing body tag之前移动脚本标签到文档的底部。

<script type="text/javascript"> 
     // Tabs 
     $('#tabs').tabs(); 
</script> 
</body> 
+0

辉煌。像魔术一样工作 – jankajg 2010-07-17 07:07:45