탭

  

    
    
    
    
  
<div class="tab">
  <ul class="tabnav">
    <li><a href="#tab01">탭1</a></li>
    <li><a href="#tab02">탭2</a></li>
  </ul>
  <div class="tabcontent">
    <div id="tab01">tab1 content</div>
    <div id="tab02">tab2 content</div>
  </div>
</div>

 $(function(){
 $('.tabcontent > div').hide();
 $('.tabnav a').click(function () {
   $('.tabcontent > div').hide().filter(this.hash).fadeIn();
   $('.tabnav a').removeClass('active');
   $(this).addClass('active');
   return false;
 }).filter(':eq(0)').click();
 });
 
 $(function(){
  $('.tabcontent > div').hide();
  $('.tabnav a').click(function () {
    $('.tabcontent > div').hide().filter(this.hash).show(); // fadeIn() 대신 show() 사용
    $('.tabnav a').removeClass('active');
    $(this).addClass('active');
    return false;
  }).filter(':eq(0)').click();
});

 

 

 

두개 이상 사용

 

  

    
    
    
    
  
<div class="tab">
                <ul class="tabnav">
                    <li><a href="#tab01-1">탭1</a></li>
                    <li><a href="#tab02-1">탭2</a></li>
                </ul>
                <div class="tabcontent">
                    <div id="tab01-1">tab1 content</div>
                    <div id="tab02-1">tab2 content</div>
                </div>
            </div>

            <div class="tab">
                <ul class="tabnav">
                    <li><a href="#tab01-2">탭1</a></li>
                    <li><a href="#tab02-2">탭2</a></li>
                </ul>
                <div class="tabcontent">
                    <div id="tab01-2">tab1 content</div>
                    <div id="tab02-2">tab2 content</div>
                </div>
            </div>
            
            
            $(function () {
    $('.tabcontent > div').hide(); // Hide all content initially

    $('.tab').each(function () {
        const $thisTab = $(this);

        $thisTab.find('.tabnav a').click(function () {
            $thisTab.find('.tabcontent > div').hide(); // Hide content in this tab
            $thisTab.find(this.hash).fadeIn(); // Show content corresponding to the clicked tab
            $thisTab.find('.tabnav a').removeClass('active'); // Remove active class from all links
            $(this).addClass('active'); // Add active class to clicked link
            return false;
        }).filter(':eq(0)').click(); // Trigger click on the first tab of each tab group
    });
});

 

 

 

탭 ver2

 

  

    
    
    
    
  
<div class="tab">
                <ul class="tabs">
                    <li class="tab-link current" data-tab="tab-1">tab1</li>
                    <li class="tab-link" data-tab="tab-2">tab2</li>
                    <li class="tab-link" data-tab="tab-3">tab3</li>
                    <li class="tab-link" data-tab="tab-4">tab3</li>
                    <li class="tab-link" data-tab="tab-5">tab3</li>
                    <li class="tab-link" data-tab="tab-6">tab3</li>
                </ul>

                <div id="tab-1" class="tab-content current">tab content1</div>
                <div id="tab-2" class="tab-content">tab content2</div>
                <div id="tab-3" class="tab-content">tab content3</div>
                <div id="tab-4" class="tab-content">tab content3</div>
                <div id="tab-5" class="tab-content">tab content3</div>
                <div id="tab-6" class="tab-content">tab content3</div>
            </div>
            
            
            .tab-content{display: none;}
.tab-content.current{display: block;}

<script>
        $(document).ready(function(){

            $('ul.tabs li').click(function(){
                var tab_id = $(this).attr('data-tab');

                $('ul.tabs li').removeClass('current');
                $('.tab-content').removeClass('current');

                $(this).addClass('current');
                $("#"+tab_id).addClass('current');
            })

        })
    </script>