jQuery 탭이 작동하지 않습니다.

Question

AJAX 탭 컨테이너를 대체하기 위해 jQuery 탭을 구현하려고합니다. 내가 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

귀하의 코드가 잘 작동이 순서 http://jsfiddle.net/fJaBa/

Answer 2

jquery 전문가가 아니지만 제대로 작동하려면 일부 CSS가 필요합니다. 그들은 상대적인 위치에 있어야 할 것입니다. 또한 코드를 비교하려면 jquery tabs tutorial을 확인하십시오.

Answer 3

1.8 jQuery UI 라이브러리 별칭이 작동합니까? 1.8.16과 같은 정식 버전을 사용해 보셨습니까? 일단로드 된 페이지를보고 jQuery 및/또는 jQuery UI가 실제로 성공적으로 가져 왔는지 확인할 수 있습니까?

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

당신은 CSS 파일을 연결해야합니다. 누락 된 유일한 것은 탭용 CSS입니다. - http://jsfiddle.net/8JX4A/

Answer 5

한번에 로딩 스크립트 :

Answer 6

같은 페이지에 다른 jQuery 요소가있는 경우 충돌이있을 수 있습니다. 나는이 같은 문제가이 함께 시도 :

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

만 변경 i:; jQuery.noConflict();를 각각의 jQuery 요소 앞에. JQuery와 UI로드 실패 같은

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