[jquery] tab메뉴 만들기

<div class="course_sun">
        <ul class="tabs">
            <li class="tab-link current" data-tab="tab1-1" id="btS1">제목1</li>
            <li class="tab-link" data-tab="tab1-2" id="btS2">제목2</li>
            <li class="tab-link" data-tab="tab1-3" id="btS3">제목3</li>
        </ul>
        <div id="tab1-1" class="tab-content current">
           내용1
        </div>
        <div id="tab1-2" class="tab-content">
            내용2
        </div>
        <div id="tab1-3" class="tab-content">
           내용3
        </div>
    </div>

✅html
1) ul과 li로 탭 상단 제목을 만들어준다 data-tab과 하단에 작성할 내용의 id명이 일치하게 작성
2) div안에 원하는 내용을 작성하고 id명을 원하는 제목과 일치하게 작성한다

  $('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');
    });

✅json
1) ul안에 li를 클릭하는 이벤트 함수작성
2) data-tab과 tab내용 id 속성을 일치하게 한다
3) 클릭시 li current클래스와 content current클래스를 제거한다 -> 중복방지
4) 이후 current클래스를 추가

✔ 다양한 tab디자인 활용가능