jQuery UI 탭을 변경할 때 모든 페이지 새로 고침

탭을 변경할 때 모든 탭 내용을 새로 고침하고 싶습니다. 예를 들어, 나는 세 번째 탭을 선택할 때 첫 번째와 세 번째 탭을 새로 고칩니다. 다른 솔루션은 탭을 클릭 할 때 탭 내용을 다시로드합니다.jQuery UI 탭을 변경할 때 모든 페이지 새로 고침

아이디어가 있으십니까?

감사합니다, 나는이 같은 변화 탭 이벤트 잡을

$("#tabs").bind('tabsselect', function (event, ui) { 
    //ui.index is tab selected 
});

HTML

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Choice1</a></li> 
     <li><a href="#tabs-2">Choice2</a></li> 
     <li><a href="#tabs-3">Choice3</a></li> 
    </ul> 
    <div id="tabs-1">@Html.Partial("Choice1", Model)</div> 
    <div id="tabs-2">@Html.Partial("Choice2", Model)</div> 
    <div id="tabs-3">@Html.Partial("Choice3", Model)</div> 
</div>

출처

2011-04-14 Kris-I

'예, 탭이 3 개 있고, 두 번째 탭을 선택하면 첫 번째 새로 고침을 할 수 있습니까? 세 번째 .' 새로 고침은 무엇을 의미합니까? 콘텐츠를 다른 것으로 변경 하시겠습니까? –

당신이를 사용해야하는 이유를? 그들이 볼이 arent 때문에 :), Load tab data through ajax

그래서 당신은 탭 1 & 3를 새로 고침 할 필요가 없습니다 :

그냥 여기에 아약스 옵션을 통해 부하를 사용합니다. 보고 싶은 데이터를 다시로드하면로드가 페이지에 저장됩니다!

는 Btw은 내가 UI 탭 데모에서이 기능에 관한 해요 :

$(function() { 
    $("#tabs").tabs({ 
     ajaxOptions: { 
      error: function(xhr, status, index, anchor) { 
       $(anchor.hash).html(
        "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
        "If this wouldn't be a demo."); 
      } 
     } 
    }); 
});

출처

2011-04-14 09:32:26

@ Shazada .. 그는 Tab-1을 클릭 할 때 뭔가를 찾고 있습니다. 그는 다른 탭에 Ajax 콘텐츠를로드하려고합니다. –

나는 그가 원하는 것을 이해하지만 논리를 이해하지 못합니다. 숨겨진 데이터를로드해야하는 이유는 무엇입니까? 예 : 탭 -2를 클릭하십시오 : 탭 1 및 탭 3이로드됩니다. 그런 다음 탭 -3을 클릭하십시오. 다시 tab-1이로드됩니다. 따라서 백그라운드에서 동일한 데이터를 두 번 다시로드하는 것은 사용자가 볼 수 없으므로 오버 헤드입니다. –

당신의 탭이 표시되는 탭의 이름을 포함 <ul>를 낳게 될 것입니다.

<ul> 

      <li><a href="#tabs-1" id="tab-1">Tab1</a></li> 

      <li><a href="#tabs-2" id="tab-2">Tab2</a></li> 




     </ul>

또한 당신은 당신이 TAB2를 다시로드하려면, 탭 바로-2 DIV를로드 탭 탭-1의 클릭에

<div id="tabs-1" style="width:98%;"> 

    <span style="padding-left:200px;font-size: 1em;"> &nbsp;&nbsp;&nbsp; <strong>Loading....</strong> </span> 

    </div> 

    <div id="tabs-2" style="width:98%;"> 
    <span style="padding-left:200px;font-size: 1em;"> &nbsp;&nbsp;&nbsp; <strong>Loading....</strong> </span> 
    </div>

에 대한 div의 목록을 낳게 될 것입니다

'클릭, 함수 (이벤트) {

출처

2011-04-14 09:41:00

jQuery UI 탭을 변경할 때 모든 페이지 새로 고침

답변

관련 문제