2010-04-23 2 views
0

나는 ....jquery tabs - 현재 탭에 url을로드 하시겠습니까?

이를 URL에게 온 클릭 탭 영역 내부의 각 탭 링크를로드하는 방법을 알아 내려고 노력하고있어 및 http://docs.jquery.com/UI/Tabs#...open_links_in_the_current_tab_instead_of_leaving_the_page에서 문서를 다음에 시도하고있다, 그러나 분명하게 받고 있지 않다 내가 갔어요 ....

$(".tabs").tabs({ 
    load: function(event, ui) { 
      $('a', ui.panel).click(function() { 
        $(ui.panel).load(this.href); 
        return false; 
       }); 
    } 
    }); 

를 내가이 잘못의 일부를 가지고 알고 : HTML 마크 업입니다 :

<div class="tabs"> 
    <ul class="tabNav"> 
    <li><a href="/1.html#tabone">Tab One</a></li> 
    <li><a href="/2.html#tabtwo">Tab Two</a></li> 
    <li><a href="/3.html#tabthree">Tab Three</a></li> 
    </ul> 
</div> 

<div id="tabone"> 
    <!-- Trying to load content from 1.html in this div on click --> 
</div> 

<div id="tabtwo"> 
    <!-- Trying to load content from 2.html in this div on click --> 
</div> 

<div id="tabthree"> 
    <!-- Trying to load content from 3.html in this div on click --> 
</div> 

는 그리고 이것은 내가 사용하려고 해요 JQuery와있다 몇 번 반복 (게시물이 너무 많음)을 반복하면 빈 div가 표시됩니다. ... 모르겠다. 여기 조금 혼란 스럽다 ... 도움?

답변

2

참조하는 페이지는 현재 탭의 탭에있는 이라는 링크를로드하는 데 사용되며 링크에서 탭 자체를로드하지 않습니다. 링크를 탭으로 사용하여 작업하려면 load 메소드를 사용할 필요가 없습니다.

정말 필요한 것은 tab 컨테이너 DIVS을 생략 할 수 있습니다. 다른 탭은 상대적이며 전체 탭 내용을 나타내는 것으로 가정하므로 / 및 해시를 제거했습니다.

<div class="tabs"> 
    <ul class="tabNav"> 
    <li><a href="1.html" title="Tab One">Tab One</a></li> 
    <li><a href="2.html" title="Tab Two">Tab Two</a></li> 
    <li><a href="3.html" title="Tab Three">Tab Three</a></li> 
    </ul> 
</div> 

<script type="text/javascript"> 
    $(function() { // note wrap in 'ready" function to make sure DOM is loaded 
     $('.tabs).tabs(); 
    }); 
</script> 
0

그리고 탭을로드 한 후에도 다음 JS 코드를 추가해야합니다.

$('#tabs ul li.ui-tabs-selected a').click(function(){ 
       location.href = $(this).attr('href'); 
       return false; 
     }).css('cursor', 'pointer'); 

환호성 !!!