Las pestañas jQuery no funcionan

Question

Estoy tratando de implementar pestañas jQuery para reemplazar el contenedor de pestañas AJAX. Seguí el código del jquery website pero mis pestañas no se muestran. Simplemente carga toda la página llena de datos sin pestañas. Firebug y me dice el siguiente error:

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

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

Tengo referencias a todos los archivos necesarios:

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

y tengo la función especificada de la siguiente manera:

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

    </script> 

El código para las fichas son los siguientes:

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> 

Puede alguien decirme lo que estoy haciendo mal? Como la función .tabs() no funciona, la página solo está cargando como tal:

Answer 1

Su código funciona bien. Lo único que te falta es el CSS para las pestañas: http://jsfiddle.net/8JX4A/

Answer 2

No soy un experto en jquery, pero sé que necesitará algunos css para que las pestañas funcionen correctamente. ya que necesitarán estar posicionados de forma relativa. También consulte este jquery tabs tutorial para comparar su código.

Answer 3

¿Funciona el alias 1.8 de jQuery UI lib? ¿Has intentado utilizar una versión completa específica, como 1.8.16 en su lugar? ¿Puedes mirar la página una vez que está cargada y ver si jQuery y/o la jQuery UI realmente se instalaron con éxito?

Answer 4

es necesario enlazar el archivo CSS: http://jsfiddle.net/fJaBa/

Answer 5

guiones intente cargar en esta secuencia

<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

Si tienes otro elemento jQuery en la misma página, quizás tengas conflictos. Tengo el mismo problema, pruebe con esto:

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

Sólo entonces cambiar i:; jQuery.noConflict(); antes de cada elemento de 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