2012-09-04 40 views
0

无论我做什么,CSS样式表都不起作用。我一直在努力尝试没有运气的日子。即使我下载演示文稿,某些样式也不起作用。在这里看到:JQuery UI CSS样式表不工作

http://i.imgur.com/DsgMK.png(在Chrome和Firefox测试)

所以,我做了使用谷歌的CDN,希望别人能看到我在做什么错这个测试代码。

<html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
    <meta http-equiv="content-type" content="text-html; charset=utf-8" /> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/sunny/jquery-ui.css" type="text/css" /> 
    <title>JQuery UI Test</title> 
</head> 
<body> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
</script> 

    <!-- Accordion --> 
    <h2 class="demoHeaders">Accordion</h2> 
    <div id="accordion"> 
     <div> 
      <h3><a href="#">First</a></h3> 
      <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
     </div> 
     <div> 
      <h3><a href="#">Second</a></h3> 
      <div>Phasellus mattis tincidunt nibh.</div> 
     </div> 
     <div> 
      <h3><a href="#">Third</a></h3> 
      <div>Nam dui erat, auctor a, dignissim quis.</div> 
     </div> 
    </div> 

    <!-- Button --> 
    <h2 class="demoHeaders">Button</h2> 
    <button id="button">A button element</button> 
    <form style="margin-top: 1em;"> 
     <div id="radioset"> 
      <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> 
      <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
      <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> 
     </div> 
    </form> 


</body> 
</html> 

这是我从上面的代码得到:http://i.imgur.com/j09RY.png

我想这应该是简单的,但我一定是做错了什么。非常感谢您提前!

+0

你期待什么结果呢?两幅图像中的按钮对我来说都是一样的。你是否期待它以某种方式看起来不同? – MrOBrian

回答

4

要创建任何jQuery UI元素,您必须编写一个JavaScript代码来创建它们。

事情是这样的:

<script type="text/javascript"> 
    $(function() { 
     $("#accordion").accordion(); 
     $("#button").button(); 
    }); 
</script> 

看看jQuery UI的文档以获取更多信息: http://jqueryui.com/demos/

+0

不知道为什么我无法在JQuery文档中找到它 - 感谢您的简单答案。 CSS仍然没有正常显示,但至少有一些风格现在正在显示。 – user353885

+9

你不需要src中的“http:”。 [看到这个](http://stackoverflow.com/questions/550038/is-it-valid-to-replace-http-with-in-a-script-src-http) – Nal