섹션을 탭컨텐츠처럼 사용하기

빌더에 있는 탭 구조로는 컨텐츠 부분에 빌더로 구성할 수 있는 게 제한적이라, 탭 메뉴를 따로 만들고 섹션 전체를 탭 컨텐츠처럼 사용해서 숨기거나 노출할 때 적용할 수 있는 스크립트

ex) 사이트 내 페이지에 최대 5개의 탭 메뉴가 사용될 때

jQuery(function ($) {

    /* 페이지 내 탭 메뉴 */
    $('ul.tab-type li a').click(function () {

        $('ul.tab-type li').removeClass('on');
        $(this)
            .parent()
            .addClass('on');

        $('.tab-content').css('display', 'none');
    });
    $('ul.tab-type li:nth-child(1) a').click(function () {
        $('#tab-content-1').css('display', 'block');
    });
    $('ul.tab-type li:nth-child(2) a').click(function () {
        $('#tab-content-2').css('display', 'block');
    });
    $('ul.tab-type li:nth-child(3) a').click(function () {
        $('#tab-content-3').css('display', 'block');
    });
    $('ul.tab-type li:nth-child(4) a').click(function () {
        $('#tab-content-4').css('display', 'block');
    });
    $('ul.tab-type li:nth-child(5) a').click(function () {
        $('#tab-content-5').css('display', 'block');
    }); // 최대 5개로 구성 됨

    /* 페이지가 열릴 때 특정 탭 컨텐츠가 먼저 열리게 할 때 (url에 #약속된ID를 추가) */
    var hash = location
        .hash
        .replace("#", "");
    if (hash) {
        //            alert(hash);
        $('.tab-content').css('display', 'none');
        $('ul.tab-type li').removeClass('on');
    }
    if (hash == 'tab2') {
        $('#tab-content-2').css('display', 'block');
        $('ul.tab-type li:nth-child(2)').addClass('on');
    }
    if (hash == 'tab3') {
        $('#tab-content-3').css('display', 'block');
        $('ul.tab-type li:nth-child(3)').addClass('on');
    }
    if (hash == 'tab4') {
        $('#tab-content-4').css('display', 'block');
        $('ul.tab-type li:nth-child(4)').addClass('on');
    }
    if (hash == 'tab5') {
        $('#tab-content-5').css('display', 'block');
        $('ul.tab-type li:nth-child(5)').addClass('on');
    }

});

Script Snippet