2010-07-17 76 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