Question

我正在尝试实现jQuery选项卡来替换AJAX选项卡容器。我已按照jquery website中的代码进行操作，但我的标签未显示。它只是加载整个页面，没有任何标签。萤火虫告诉我以下错误：

$("#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（）函数不起作用，因此页面只是加载 - No Tabs

Answer 1

您的代码运行正常。您唯一缺少的是标签的CSS - http://jsfiddle.net/8JX4A/

Answer 2

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

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

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

Answer 3

您需要链接CSS文件： http://jsfiddle.net/fJaBa/

Answer 4

尝试按此顺序加载脚本

<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>

Answer 5

$.fn.tabs = function() {
    var selector = this;

    this.each(function() {
        var obj = $(this); 

        $(obj.attr('href')).hide();

        $(obj).click(function() {
            $(selector).removeClass('active');

            $(selector).each(function(i, element) {
                $($(element).attr('href')).hide();
            });

            $(this).addClass('active');

            $($(this).attr('href')).fadeIn();

            return false;
        });
    });

    $(this).show();

    $(this).first().click();
};

Live Demo Here

Answer 6

不是jquery专家，但我知道你需要一些css来使标签正常工作。因为它们需要相对定位。另请查看此jquery tabs tutorial以比较您的代码。

Answer 7

jQuery UI lib的1.8别名是否有效？您是否尝试使用特定的完整版本，例如1.8.16？加载后可以查看页面，看看jQuery和/或jQuery UI是否实际上已成功拉入？

jQuery选项卡不起作用

7 个答案: