jQuery를 사용하여 동일한 페이지에 여러 개의 탭이있는 경우

Question

매우 기본적인 JQ 탭에 몇 가지 문제가 있습니다.

같은 페이지에 3 개 또는 4 개의 동일한 탭이 있어야합니다. 이 JQ 코드는 하나의 탭에서 작동하지만 첫 번째 탭의 내용 만 변경하면 다른 탭을 클릭해도 작동합니다.

누군가가이 기능을 구현하기 위해 나에게 해결 방법을 보여줄 수 있습니까?

이

는

$(document).ready(function(){ 
$('ul.tabs').each(function(){ 
var $active, $content, $links = $(this).find('a'); 
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
$active.addClass('active'); 
$content = $($active.attr('href')); 

$links.not($active).each(function() { 
    $($(this).attr('href')).hide(); 

을 사용하여 코드 IM}이다);

// Bind the click event handler 
     $(this).on('click', 'a', function(e){ 
    $active.removeClass('active'); 
    $content.hide(); 
    $active = $(this); 
    $content = $($(this).attr('href')); 
    $active.addClass('active'); 
    $content.show(); 
    e.preventDefault(); 
    }); 
}); 

});

이

은

<div class="bluetabs"> 
    <ul class='tabs'> 
    <li><a href='#tab1'>WEB DESIGN</a></li> 
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li> 
    </ul> 
    <div class="bluetabContent"> 
     <div id='tab1'> 
     ... 
     </div> 
     <div id='tab2'> 
     ... 
     </div> 

    </div> 
</div><!-- BLUE TABS --> 

<div class="greentabs"> 
    <ul class='tabs'> 
    <li><a href='#tab1'>WEB DESIGN</a></li> 
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li> 
    </ul> 
    <div class="bluetabContent"> 
     <div id='tab1'> 
     ... 
     </div> 
     <div id='tab2'> 
     ... 
     </div> 

    </div> 
</div><!-- GREEN TABS --> 

<div class="redtabs"> 
    <ul class='tabs'> 
    <li><a href='#tab1'>WEB DESIGN</a></li> 
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li> 
    </ul> 
    <div class="bluetabContent"> 
     <div id='tab1'> 
     ... 
     </div> 
     <div id='tab2'> 
     ... 
     </div> 

    </div> 
</div><!-- RED TABS --> 

Answer 1

당신의 ID가 HTML 문서 예컨대 Ref의 고유 특성을 유지하려면 HTML을합니다.

간단히 말해서 탭 ID를 tab1, tab2, tab3 및 tab4로 변경하면 문제가 해결됩니다.

Answer 2

당신은 Jquery 탭을 사용하여 하나의 멀티 팩을 사용할 수 있으며 고유 한 클래스없이 작업하면 모든 테이블에 대해 동일한 클래스가 될 수 있습니다. https://jqueryui.com/tabs/

이것을 확인하고 여러 시간 탭을 복사하지만 ID를 클래스로 변경하면 jquery도 작동합니다.