jQuery - ul.tabs 외부의 탭에 연결

Question

어떻게 다른 탭에 대한 클릭 가능한 링크를 ul.tabs 외부에서 만들 수 있도록 스크립트를 변경할 수 있습니까?

도움을 주시면 감사하겠습니다. 에서

<script type="text/javascript"> 
    $(document).ready(function() { 
     var $tabContent = $(".tab-content"), 
      $tabs = $("ul.tabs li"), 
      tabId; 

     $tabContent.hide(); 
     $("ul.tabs li:first").addClass("active").show(); 
     $tabContent.first().show(); 

     $tabs.click(function() { 
      var $this = $(this); 
      $tabs.removeClass("active"); 
      $this.addClass("active"); 
      $tabContent.hide(); 
      var activeTab = $this.find("a").attr("href"); 
      $(activeTab).fadeIn(); 
      //return false; 
     }); 

     // Grab the ID of the .tab-content that the hash is referring to 
     tabId = $(window.location.hash).closest('.tab-content').attr('id'); 

     // Find the anchor element to "click", and click it 
     $tabs.find('a[href=#' + tabId + ']').click(); 
    }) 

    $('a').not('.tabs li a').on('click', function(evt) { 
     evt.preventDefault(); 
     var whereTo = $(this).attr('goto'); 
     $tabs = $("ul.tabs li"); 
     $tabs.find('a[href=#' + whereTo + ']').trigger('click'); 
     //alert(attr('name')); 
    //alert($('#'+whereTo+' a').offset().top); 
     $('html, body').animate({ 
      scrollTop: $('#'+whereTo+' a').offset().top 
     }); 

    }); 

    $(function() { 
     $('a.refresh').live("click", function() { 
      location.reload(); 
     }); 
    }); 
</script> 

코드 :

<a href="#" goto="my_tab">Clicky</a> 

이로 이동합니다 : 그것은 당신을 위해 거기에 이미 http://jsfiddle.net/dhirajbodicherla/TGMDd/2/

Answer 1

, 그냥 당신이 가고 싶은 탭의 href 일치하는 goto 속성을 지정 탭이 다음과 같이 설정되었습니다.

<ul class="tabs"> 
    <li><a href="#my_tab">It goes here</a></li>