Jquery选项卡不工作，我错过了什么？

我试图使用jquery的标签，我得到了代码从网站：http://docs.jquery.com/UI/Tabs和尝试，看看：Jquery选项卡不工作，我错过了什么？

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.5.1.js"></script> 
    <script type="text/javascript" src="jquery-ui-1.8.11.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#tabs").tabs(); 
     }); 
    </script> 
</head> 
<body style="font-size:62.5%;"> 

<div id="tabs"> 
    <ul> 
     <li><a href="#fragment-1"><span>One</span></a></li> 
     <li><a href="#fragment-2"><span>Two</span></a></li> 
     <li><a href="#fragment-3"><span>Three</span></a></li> 
    </ul> 
    <div id="fragment-1"> 
     <p>First tab is active by default:</p> 
     <pre><code>$('#example').tabs();</code></pre> 
    </div> 
    <div id="fragment-2"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
    <div id="fragment-3"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
</div> 
</body> 
</html>

什么也没有发生。我错过了什么？

来源

2012-02-16 Ricksher

的jQuery UI的 – Fox32 2012-02-16 18:28:36

@Ricksher的CSS创建你自己的主题 - 如果你觉得任何的答案有帮助你，请接受它。如果你需要为你的其他问题得到很好的答案 – DG3 2012-02-16 19:01:24

您需要添加jquery ui的css主题。查看here（“基本概述：在网页上使用jQuery UI”）以获取详细信息。把你的头标记：

<link type="text/css" href="css/themename/jquery-ui-1.8.17.custom.css" rel="Stylesheet" />

您可以选择默认的主题或通过ThemeRoller

来源

2012-02-16 18:30:47 Fox32

如果我想做我自己的CSS？我必须做什么？用我的颜色等...？ – Ricksher 2012-02-16 18:32:23

看看http://jqueryui.com/themeroller/来创建你自己的主题，或者选择一个示例主题。 – Fox32 2012-02-16 18:33:18

您缺少样式表。在您的JavaScript文件之前包含<link href="http://code.jquery.com/ui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet">

如果您想覆盖样式，可以执行以下操作。例如，如果要更改活动选项卡的文本颜色，我会发现通过Chrome开发人员工具正在使用以下类。所以我可以在我的css中覆盖这些类

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { 
      color: red !important 
}

来源

2012-02-16 18:30:13 DG3

如果我想做我自己的CSS，这对你也有帮助吗？我必须做什么？用我的颜色等...？ – Ricksher 2012-02-16 18:32:13

如果你想改变标签的文本颜色，例如，你可以在你的css文件中重写那个特定的类，并且可以使用！important，以便你的样式生效。您可以通过在Firebug中检查它（如果您使用的是Firefox）或Chrome开发人员工具，随时获取特定元素的CSS样式。 – DG3 2012-02-16 18:34:19

或者，不jquery ui有他们的网站上的建设工具？你可以使用它来构建一个jQuery UI兼容的主题来匹配你当前的CSS。 – 2012-02-16 18:37:28

Jquery选项卡不工作，我错过了什么？

回答

相关问题