JAY DESIGN

탭 기본

탭 기본의 경우 IE브라우저는 IE는 tab--[탭 개수] 클래스 필수이며, IE이상 다른 브라우저는 탭개수 클래스 생략 가능하다. 탭 기본 - 두줄의 경우, tab--[탭 개수(짝수로 올림)] 클래스가 필수이다. (예 6개일 경우 .tab--6추가, 7개일경우 .tab--8)

탭 기본

Tab contents 1

Tab contents 2

Tab contents 3

Tab contents 4

Tab contents 5

탭 기본 - 두줄

Tab contents 1

Tab contents 2

Tab contents 3

Tab contents 4

Tab contents 5

Tab contents 6

Tab contents 7

Tab contents 8

탭 기본 - 스몰

Tab contents 1

Tab contents 2

Tab contents 3

//탭 기본
<div class="tab__container">
    <div class="tab tab--box tab--5">
        <button type="button" class="on">Tab1</button>
        <button type="button">Tab2</button>
        <button type="button">Tab3</button>
        <button type="button">Tab4</button>
        <button type="button">Tab5</button>
    </div>
    <div class="tab__contents">
        <div class="tab__box active">Tab contents 1</div>
        <div class="tab__box">Tab contents 2</div>
        <div class="tab__box">Tab contents 3</div>
        <div class="tab__box">Tab contents 4</div>
        <div class="tab__box">Tab contents 5</div>
    </div>
</div>

//탭 기본 - 두줄
<div class="tab__container">
    <div class="tab tab--box tab--box-2 tab--8">
        <button type="button">Tab2</button>
        <button type="button">Tab3</button>
        <button type="button">Tab4</button>
        <button type="button">Tab5</button>
        <button type="button">Tab6</button>
        <button type="button">Tab7</button>
    </div>
    <div class="tab__contents">
        <div class="tab__box active">Tab contents 1</div>
        <div class="tab__box">Tab contents 2</div>
        <div class="tab__box">Tab contents 3</div>
        <div class="tab__box">Tab contents 4</div>
        <div class="tab__box">Tab contents 5</div>
        <div class="tab__box">Tab contents 6</div>
        <div class="tab__box">Tab contents 7</div>
        <div class="tab__box">Tab contents 8</div>
    </div>
</div>

//탭 기본 - 스몰
<div class="tab__container">
    <div class="tab tab--box tab--box-sm">
        <button type="button" class="on">Tab1</button>
        <button type="button">Tab2</button>
        <button type="button">Tab3</button>
    </div>
    <div class="tab__contents">
        <div class="tab__box active">Tab contents 1</div>
        <div class="tab__box">Tab contents 2</div>
        <div class="tab__box">Tab contents 3</div>
    </div>
</div>

탭 TYPE 01

Tab contents 1

Tab contents 2

Tab contents 3

<div class="tab__container">
    <div class="tab tab--primary">
        <button type="button" class="on">Tab1</button>
        <button type="button">Tab2</button>
        <button type="button">Tab3</button>
    </div>
    <div class="tab__contents">
        <div class="tab__box active">Tab contents 1</div>
        <div class="tab__box">Tab contents 2</div>
        <div class="tab__box">Tab contents 3</div>
    </div>
</div>

탭 TYPE 02

Tab contents 1

Tab contents 2

Tab contents 3

<div class="tab__container">
    <div class="tab tab--secondary">
        <button type="button" class="on">Tab1</button>
        <button type="button">Tab2</button>
        <button type="button">Tab3</button>
    </div>
    <div class="tab__contents">
        <div class="tab__box active">Tab contents 1</div>
        <div class="tab__box">Tab contents 2</div>
        <div class="tab__box">Tab contents 3</div>
    </div>
</div>

탭 TYPE 03

Tab contents 1

Tab contents 2

Tab contents 3

<div class="tab__container">
    <div class="tab tab--line">
        <button type="button" class="on"><span>Tab1</span></button>
        <button type="button"><span>Tab2</span></button>
        <button type="button"><span>Tab3</span></button>
    </div>
    <div class="tab__contents">
        <div class="tab__box active">Tab contents 1</div>
        <div class="tab__box">Tab contents 2</div>
        <div class="tab__box">Tab contents 3</div>
    </div>
</div>