2012-08-01 2 views
0

간단한 탭보기에 다음 jquery 코드를 사용합니다. 탭을 클릭하면 해당 탭에 특정한 div가 표시됩니다. 이는 ul.tabs 속성 안의 탭을 클릭 할 때만 작동합니다. 원하는 코드를 표시하기 위해 ul.tabs 목록 외부의 동일한 페이지에 대한 링크를 허용하도록 코드를 조정할 수 있습니까?Jquery - 다른 링크의 탭로드

  <ul class="tabs"> 
      <li><a href="#photo_tab">Photos</a></li> 
     </ul> 
     <div id="photo_tab" class="tabcontent"> 
      <h3>Section 1</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> 
     </div> 

그래서 나는 photo_tab의 사업부를 불러 활성을 보여줍니다 페이지에 다른 곳에서 링크를 HREF = "#의 photo_tab"를 사용하고 싶습니다 : 여기

$(document).ready(function(){ 
    $('ul.tabs').each(function(){ 
     // For each set of tabs, we want to keep track of 
     // which tab is active and it's associated content 
     var $active, $content, $links = $(this).find('a'); 

     // Use the first link as the initial active tab 
     $active = $links.first().addClass('active'); 
     $content = $($active.attr('href')); 

     // Hide the remaining content 
     $links.not(':first').each(function() { 
      $($(this).attr('href')).hide(); 
     }); 

     // Bind the click event handler 
     $(this).on('click', 'a', function(e){ 
      // Make the old tab inactive. 
      $active.removeClass('active'); 
      $content.hide(); 

      // Update the variables with the new link and content 
      $active = $(this); 
      $content = $($(this).attr('href')); 

      // Make the tab active. 
      $active.addClass('active'); 
      $content.show(); 

      // Prevent the anchor's default click action 
      e.preventDefault(); 
     }); 
    }); 
}); 

는 HTML입니다 탭.

답변

0

클릭 트리거를 수동으로 올바른 탭에서 실행할 수 있습니다.

HTML :

<div class="extlink" data-tabid="photo_tab">click me!</div> 


<ul class="tabs"> 
    <li><a href="#photo_tab" id="photo_tab">Photos</a></li> 
</ul> 

JS :

$('.extlink').click(function(){ 
    var tabid = $(this).attr('data-tabid'); // this gets the id of the element you want to trigger 
    $('#'+tabid).click(); /// this acts as if you clicked on that tab element 
}); 
+0

걱정하지 마라는 extlink에 ID를 추가 잊었다. 고마워! – John

관련 문제