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(); i:; jQuery.noConflict(); 在每個jQuery元素之前。

Answer 3

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

Answer 4

$.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();
};

現場演示

Answer 5

嘗試按此順序加載腳本

<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 6

不是jquery專家，但我知道你需要一些css來使標簽正常工作。 因為它們需要相對定位。 另請查看此jquery選項卡教程以比較您的代碼。

Answer 7

jQuery UI lib的1.8別名是否正常工作？ 您是否嘗試使用特定的完整版本，例如1.8.16 ？ 你可以看一下它加載后的頁面，看看jQuery和/或jQuery UI是否真的被成功拉入了？