jQuery选项卡不起作用

Question

我正在尝试实现jQuery选项卡来替换AJAX选项卡容器.我已经关注了jquery网站上的代码,但我的标签没有显示出来.它只是加载整个页面,没有任何标签.萤火虫告诉我以下错误:

$("#tabs").tabs is not a function

$("#tabs").tabs();

我已经获得了所需的所有文件:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

我有如下指定的功能:

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

  </script>

选项卡的代码如下:

div id="tabs">
    <ul>
        <li><a href="#tab-1"><span>Patient Information</span></a></li>
        <li><a href="#tab-2"><span>Medical History 1 of 3</span></a></li>
        <li><a href="#tab-3"><span>Medical History 2 of 3</span></a></li>
        <li><a href="#tab-4"><span>Medical History 3 of 3</span></a></li>
        <li><a href="#tab-5"><span>Scheduler</span></a></li>
        <li><a href="#tab-6"><span>Care Plan</span></a></li>
    </ul> 
<div id="tab-1">
</div>
**Repeats for all tabs through tab-6**
</div>

谁能告诉我我做错了什么？由于.tabs()函数不起作用,页面只是像这样加载 -

Answer 1

你的代码工作得很好.你唯一缺少的是标签的CSS - http://jsfiddle.net/8JX4A/

Answer 2

如果您在同一页面中有另一个jQuery元素,则可能存在冲突.我有同样的问题,试试这个:

<script type="text/javascript">
jQuery.noConflict();     
$(document).ready(function() {
     $("#tabs").tabs();
 });

然后只i:; jQuery.noConflict();在每个jQuery元素之前更改.