jQuery UI 원격 콘텐츠가있는 탭, 선택된 탭이있는 현재 페이지로 연결

Question

이전 버전의 jQuery UI (< = 1.8)에서는 탭이로드 될 때 원격 탭의 링크가 로컬 링크로 바뀌 었습니다. 이렇게하면 탭에서 클릭 (새 브라우저 탭에서 열린 링크)을 센터링 할 수 있었으며 탭이 선택된 상태에서 현재 페이지로 연결됩니다. 이것이 내가 유지하고 싶은 행동입니다.

올드 탭 :.

<div id="tabs"> 
    <ul> 
    <li><a href="some-ajax-content.php" title="section1">Content 1/a></li> 
    <li><a href="some-other-ajax-content.php" title="section2">Content 2</a></li> 
    </ul> 
    <div id="section 1">Loading Content...</div> 
    <div id="section 2">Loading Content...</div> 
</div> 

$ ('# 탭')를 호출 한 후 탭()이 될 것입니다 :

<div id="tabs"> 
    <ul> 
    <li><a href="#section1" title="section1">Content 1/a></li> 
    <li><a href="#section2" title="section2">Content 2</a></li> 
    </ul> 
    <div id="section 1">Loading Content...</div> 
    <div id="section 2">Loading Content...</div> 
</div> 

새로운 탭을 (UI와> = 1.9)

. $ ('# 탭')를 호출 한 후

<div id="tabs"> 
    <ul> 
    <li aria-controls="section1"><a href="some-ajax-content.php">Content 1/a></li> 
    <li aria-controls="section1"><a href="some-other-ajax-content.php">Content 2</a></li> 
    </ul> 
    <div id="section 1">Loading Content...</div> 
    <div id="section 2">Loading Content...</div> 
</div> 

탭() :

<div id="tabs"> 
    <ul> 
    <li aria-controls="section1"><a href="some-ajax-content.php">Content 1/a></li> 
    <li aria-controls="section1"><a href="some-other-ajax-content.php">Content 2</a></li> 
    </ul> 
    <div id="section 1">Loading Content...</div> 
    <div id="section 2">Loading Content...</div> 
</div> 

$ ('# tabs'). tabs()를 호출 한 후 href 속성은 교체되지 않습니다. 즉, 사용자가 새 탭에서 클릭하여 링크를 열면 은 직접 ajax 콘텐츠 인을로드합니다. 예상했던대로 아약스 콘텐츠는 자체적으로 렌더링해서는 안되는 페이지의 일부일뿐입니다. 이전 동작을 복원하기 위해 마크 업을 변경하는 쉬운 방법이 있습니까?

감사합니다.

Answer 1

나는 이것에 잠시 붙어있어서 알아 냈습니다.

JQuery와 UI 1.9, 그것은 사업부와 아약스로드에 사용되는 URL을 보여주기 위해 "#"을 사용하여 변환하기 전에

JQuery와 UI> = 1.9에 대한 그래서

에 데이터 오브젝트로 저장되어, 나는 모방하려 같은 행동. JQuery> = 1.9에서 aria-controls 속성은 각 탭에 대한 div 연관을 선택하는 데 사용됩니다.

다음은 저에게 효과적입니다.

$("#tabs").tabs({ 
    beforeActivate: function (event, ui) { 
     //...do stuff 
     var numOfTabs = $('#tabs ul li').size(); 
     //change href to use # instead of URL directly, stores URL as data object 
     for (i=0; i<numOfTabs; i++) { 
      $(ui.newTab).parent().find("li a").eq(i).data("href.tabs",$(ui.newTab).parent().find("li a").eq(i).attr('href')); 
      $(ui.newTab).parent().find("li a").eq(i).attr('href', '#'+$(ui.newTab).parent().find("li").eq(i).attr('aria-controls')); 
     } 
     //...do stuff 
    }, 
    activate: function (event, ui) { 
     //...do stuff 
     var numOfTabs = $('#tabs ul li').size(); 
     //use URL stored in data object as href 
     for (i = 0; i < lenTabs; i++) { 
      $(ui.newTab).parent().find("li a").eq(i).attr('href', $(ui.newTab).parent().find('a').eq(i).data("href.tabs")); 
     } 
     //...do stuff 
    } 
});