jQuery選項卡不工作

我試圖實現jQuery選項卡來替換AJAX選項卡容器。我遵循jquery website的代碼，但我的標籤沒有顯示出來。它只是加載整個頁面充滿數據沒有標籤。而螢火告訴我下面的錯誤：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（）函數不工作，頁面就像這樣加載 - No Tabs

來源

2012-01-26 Encryption

這聽起來像jQuery UI的是無法加載。確定js文件實際上正在加載。如果你有螢火蟲（你應該），檢查螢火蟲淨選項卡。 – SoWeLie

你的代碼的工作就好了。唯一缺少的是標籤的CSS - http://jsfiddle.net/8JX4A/

來源

2012-01-26 18:11:15

你從哪裏獲得CSS？ – AlxVallejo

@ jQuery UI演示網站@AlxVallejo –

不是一個jQuery的專家，但我知道你需要一些CSS來使標籤正常工作。因爲他們需要相對定位。還可以看看這個jquery tabs tutorial來比較你的代碼。

來源

2012-01-26 18:01:29 coletrain

1.8 alias to jQuery UI lib working？您是否嘗試過使用特定的完整版本，例如1.8.16？你可以看看頁面加載後，看看jQuery和/或jQuery UI是否真的被成功拉入？

來源

2012-01-26 18:03:24 kprobst

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

來源

2012-01-26 18:07:56

CSS文件在哪裏？ – AlxVallejo

該位置位於jsfiddle左上角的第一行。 –

嘗試加載腳本在這個序列中

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

來源

2012-01-26 18:09:18

如果在同一頁面中有另一個jQuery元素，可能會有衝突。我有同樣的問題，嘗試用這樣的：

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

那麼只有改變i:; jQuery.noConflict();每個jQuery的元素之前。

來源

2012-07-04 17:34:05 Rasatan

'jQuery.noConflict（）;'這回答了我的問題。 – codermjb

我仍然不明白爲什麼，但是這也解決了我的問題。 – BrianLegg

$.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

來源

2016-01-07 05:09:53

jQuery選項卡不工作

回答

相關問題