2012-12-18 4 views
2

jQuery 탭 구현을 사용하고 모든 것이 잘 작동하지만, 예를 들어 http://www.mydomain.com/tabs.html#tab2과 같은 URL에 링크 할 수 있고 탭 2에서 자동으로 열리게하려면 heres 내가 지금까지에 어딘지 http://jsfiddle.net/Jmx7k/jQuery 탭 - URL의 특정 탭으로 직접 이동

<script> 
jQuery(document).ready(function() { 
    jQuery('#tabs2 li a:not(:first)').addClass('inactive'); 
    jQuery('.container:not(:first)').hide(); 

    jQuery('#tabs2 li a').click(function() { 
     var t = jQuery(this).attr('href'); 
     if (jQuery(this).hasClass('inactive')) { //added to not animate when active 
      jQuery('#tabs2 li a').addClass('inactive'); 
      jQuery(this).removeClass('inactive'); 
      jQuery('.container').hide(); 
      jQuery(t).fadeIn('slow'); 
     } 
    return false; 
}) //end click 
});​ 
</script> 
    <div id="tabs2holder"> 
     <ul id="tabs2"> 
     <li><a href="#tab1">Test Tab 1</a></li> 
     <li><a href="#tab2">Test Tab 2</a></li> 
    </ul> 
</div> 

<div class="container" id="tab1"> 
    This is test content for tab1 
</div> 


<div class="container" id="tab2"> 
    This is test content for tab2 
</div> 

는 누군가가이 기능을 추가하는 올바른 방향으로 날 지점 수 및 현재이 작업을 수행하지 않습니다 그 이유도 설명?

감사

+2

'jQuery'를 긴 형식으로 한 번 써야한다는 것을 알고 계셨습니까? '(function ($) {....}) (jQuery);'에 코드를 래핑하면'noConflict'가 사용되었는지 여부와 관계없이'$'를 사용할 수 있습니다. – ThiefMaster

+1

어쩌면 당신은 이것을 사용할 수 있습니다 : http://benalman.com/projects/jquery-bbq-plugin/ – Joonas

답변

4

좋아, 당신이 해시 부분 (예를 들어 '#의 TAB2')과 URL을 만들려면이

처럼

var hash = location.hash; // hash = '#tab2' 

변화에 코드를이 값을 얻을 수 있습니다

jQuery(document).ready(function() { 
    jQuery('#tabs2 li a:not(:first)').addClass('inactive'); 
    jQuery('.container:not(:first)').hide(); 

    jQuery('#tabs2 li a').click(function() { 
     var t = jQuery(this).attr('href'); 
     if (jQuery(this).hasClass('inactive')) { //added to not animate when active 
      jQuery('#tabs2 li a').addClass('inactive'); 
      jQuery(this).removeClass('inactive'); 
      jQuery('.container').hide(); 
      jQuery(t).fadeIn('slow'); 
     } 
     return false; 
    }); //end click 

    if (location.hash == '#tab2') { 
     // don't forget to put id-attributes to your li-elements 
     jQuery('#tablink2 a').trigger('click'); 
    } 
});​ 

여기를 참조하십시오 : http://jsfiddle.net/Jmx7k/8/ jsfiddle 해시 속성은 javascript-area에 영향을 미치지 않습니다 .--(정상적인 상황에서 시도하십시오.)

관련 문제