2012-09-17 3 views
2

나는 탭이 있고 완벽하게 작동하지만이 탭의 대화 상자에 링크 또는 버튼을 넣을 수 없으며, 동일한 탭의 다른 창으로 이동합니다 (첫 번째 창에 있음). 두 번째 창을 열어 보겠습니다. 버튼을 클릭하십시오). 나는 또한 당신의 공개 토론에서 이것 같이 다른 포스트를 읽었다 그러나 나는 일을 할 수 없었다.같은 탭 탭 링크

내 코드 :

<div id="biztabs"> 

    <ul> 
     <li><a href="#tab-1">Overview</a></li> 
     <li><a href="#tab-2">Photo</a></li> 
     <li><a href="#tab-3">Video</a></li> 
    </ul> 

    <div id="tab-1"> 
    <p>Nell'anno 1969 è bastata la potenza di calcolo di due Commodore 64 per mandare con successo una navicella sulla Luna; nell'anno 2003 è necessario un Pentium 4 a 2000 Mhz per far funzionare Windows XP. Qualcosa deve essere andato storto.</p> 
    <a href="#tab-2">A INTERNAL LINK TO TAB 2</a> 
    </div> 
    <div id="tab-2"> 
    <p>Un bambino chiede al padre cosa fossero le icone,il padre risponde: "Sono immagini sacre" E il figlio:"E perchè Windows ne ha tante?" Il padre:"Perchè per farlo funzionare ci vuole un miracolo!!!"</p> 
    </div> 
    <div id="tab-3"> 
    <p>La mia stampante ogni tanto ha la carta esaurita , forse dovrei portarla da uno psicologo ?</p> 
    </div> 
</div> 

내 스크립트를

<script> 
jQuery(function() { 
jQuery('#biztabs').tabs(); 
}); 
</script> 

답변

1

JQuery와 탭 방법을 사용해보십시오 select

HTML :

<div id="biztabs"> 
    <ul> 
     <li><a href="#tab-1">Overview</a></li> 
     <li><a href="#tab-2">Photo</a></li> 
     <li><a href="#tab-3">Video</a></li> 
    </ul> 

    <div id="tab-1"> 
     <p>Nell'anno 1969 è bastata la potenza di calcolo di due Commodore 64 
      per mandare con successo una navicella sulla Luna; nell'anno 2003 è 
      necessario un Pentium 4 a 2000 Mhz per far funzionare Windows XP. 
      Qualcosa deve essere andato storto.</p> 
     <a id="to-tab-2" href="javascript:void(0)">A INTERNAL LINK TO TAB 2</a> 
    </div> 
    <div id="tab-2"> 
     <p>Un bambino chiede al padre cosa fossero le icone,il padre risponde: 
      "Sono immagini sacre" E il figlio:"E perchè Windows ne 
      ha tante?" Il padre:"Perchè per farlo funzionare ci vuole 
      un miracolo!!!"</p> 
    </div> 
    <div id="tab-3"> 
     <p>La mia stampante ogni tanto ha la carta esaurita , forse dovrei 
      portarla da uno psicologo ?</p> 
    </div> 
</div> 

jQuery를 :

$(function(){ 
    $("#biztabs").tabs(); 
    $("#to-tab-2").click(function(){ 
     $("#biztabs").tabs("select", 1); // switch to second tab 
     return false; 
    }); 
}) 
+0

이것은 내가 생각하고있는 것보다 더 나은 대답입니다! +1 – user1477388

+0

jQuery UI 탭에 다음/이전 버튼을 추가하려면 다음 CSS 트릭 문서를 확인하십시오. http://css-tricks.com/jquery-u-tabs-with-nextprevious/ It 로드에 링크를 동적으로 삽입하므로 매번 클릭 이벤트를 구체적으로 이름 지정하고 바인딩 할 필요가 없습니다. – tedski