updated. 2019-08-30
v11.3.0.4
Custom Tab

Tabslet a jQuery plugin for tabs

PLUGIN 다운로드 사이트 바로가기
박스명
탭내용1
 
1
<!-- Custom Tabs -->
2
<div class="tabs-wrap line">
3
    <header class="tabs-header"><strong>박스명</strong></header>
4
    <ul class="tabs-navs expanded">
5
        <li class="tabs-item active"><a href="#link" data-tabs-target="#panel1">Tab 1</a></li>
6
        <li class="tabs-item"><a href="#link" data-tabs-target="#panel2">Tab 2</a></li>
7
        <li class="tabs-item"><a href="#link" data-tabs-target="#panel3">Tab 3</a></li>
8
    </ul>
9
    <div id="panel1" class="tabs-panel">탭내용1</div>
10
    <div id="panel2" class="tabs-panel">탭내용2</div>
11
    <div id="panel3" class="tabs-panel">탭내용3</div>
12
</div>
14
 
1
// Custom Tabs JS
2
$('.tabs-wrap').tabslet({
3
    mouseevent: 'hover', // 탭메뉴 설정
4
    attribute: 'data-tabs-target', // 탭메뉴 타겟
5
    animation: false, // 에니메이션효과
6
    active: 2 // 선택되기 원하는 메뉴
7
    animation: false, // 에니메이션효과
8
    autorotate: false, // 자동전환
9
    delay: 5000 // 전환시간
10
    controls: {
11
        prev: '.prev',
12
        next: '.next'
13
    }
14
});
Foundation Tab

가로형

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

 코드보기
14
 
1
<!-- Tabs -->
2
<ul class="tabs" data-tabs id="example-tabs">
3
        <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
4
        <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
5
    </ul>
6
    <div class="tabs-content" data-tabs-content="example-tabs">
7
        <div class="tabs-panel is-active" id="panel1">
8
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
9
        </div>
10
        <div class="tabs-panel" id="panel2">
11
            <p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
12
        </div>
13
    </div>
14
</div>

세로형

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 코드보기
24
 
1
<!-- Vertical Tabs -->
2
<div class="row collapse">
3
      <div class="medium-3 columns">
4
        <ul class="tabs vertical" id="example-vert-tabs" data-tabs>
5
          <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
6
          <li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
7
          <li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
8
        </ul>
9
        </div>
10
        <div class="medium-9 columns">
11
        <div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
12
          <div class="tabs-panel is-active" id="panel1v">
13
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
14
          </div>
15
          <div class="tabs-panel" id="panel2v">
16
            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
17
          </div>
18
          <div class="tabs-panel" id="panel3v">
19
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
20
          </div>
21
        </div>
22
      </div>
23
    </div>
24
</div>