Các tab jQuery không hoạt động

Question

Tôi đang cố gắng triển khai các tab jQuery để thay thế vùng chứa tab AJAX. Tôi đã theo mã từ jquery website nhưng các tab của tôi không hiển thị. Nó chỉ tải toàn bộ trang dữ liệu không có tab. Và firebug nói với tôi những lỗi sau:

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

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

Tôi đã có tài liệu tham khảo cho tất cả các file cần thiết:

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

Và tôi đã nhận được chức năng được chỉ định như sau:

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

    </script> 

Mã cho các tab như sau:

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> 

bất cứ ai có thể cho tôi biết những gì tôi đang làm sai? Vì hàm .tabs() không hoạt động, trang chỉ tải như vậy -

Answer 1

Mã của bạn làm việc tốt. Điều duy nhất bạn thiếu là CSS cho các tab - http://jsfiddle.net/8JX4A/

Answer 2

Không phải chuyên gia jquery nhưng tôi biết bạn sẽ cần một số css để làm cho các tab hoạt động chính xác. vì chúng sẽ cần phải được định vị tương đối. Ngoài ra, hãy xem điều này jquery tabs tutorial để so sánh mã của bạn.

Answer 3

Bí danh 1.8 đối với lib giao diện người dùng jQuery có hoạt động không? Bạn đã thử sử dụng một phiên bản đầy đủ cụ thể, chẳng hạn như 1.8.16 thay thế? Bạn có thể xem trang khi nó được tải và xem liệu jQuery và/hoặc jQuery UI có thực sự được kéo thành công không?

Answer 4

Bạn cần liên kết các tập tin CSS: http://jsfiddle.net/fJaBa/

Answer 5

Hãy thử tải script trong chuỗi này

<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

Nếu bạn có một phần tử jQuery khác trong cùng một trang có thể bạn có xung đột. Tôi có cùng một vấn đề, hãy thử với điều này:

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

Sau đó chỉ i:; jQuery.noConflict(); thay đổi trước mỗi phần tử jQuery.

Answer 7

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