Question

HI，
我是JQuery的新手。我在实施同样的问题时遇到了问题。我想使用JQuery自定义主题中的选项卡。问题是css似乎不适用。我在谷歌上经历了很多博客等，但似乎没有什么对我有用。

我已经按照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

Answer 1

您可以尽早初始化标签页。当您运行脚本时，尚未解析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>

在ASP.Net MVC2中实现JQuery UI 1.8.2自定义主题

1 个答案: