jQuery вкладки не работают

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() не работает, страница просто загружается так:

Answer 1

Ваш код работает нормально. Единственное, чего вам не хватает, это CSS для вкладок - http://jsfiddle.net/8JX4A/

Answer 2

Не эксперт по jQuery, но я знаю, что вам понадобится css для правильной работы вкладок. так как они должны быть расположены относительно друг друга. Также ознакомьтесь с этим jquery tabs tutorial, чтобы сравнить ваш код.

Answer 3

Является ли 1.8 псевдоним jQuery UI lib рабочим? Вы пробовали использовать определенную полную версию, например 1.8.16? Можете ли вы посмотреть страницу после ее загрузки и посмотреть, действительно ли jQuery и/или jQuery UI были успешно задействованы?

Answer 4

Вы должны связать файл CSS: http://jsfiddle.net/fJaBa/

Answer 5

Try загрузки скриптов в этой последовательности

<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 на одной странице, возможно, у вас конфликты. У меня такая же проблема, попробуйте с этим:

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

Затем измените только i:; jQuery.noConflict(); перед каждым элементом 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