탭 게시물

분할 게시물와 마찬가지로 게시물에 복사 붙여 넣기만 하면 됩니다. 기본적으로 3개의 탭을 사용할 수 있고, 최대 5개의 탭을 추가할 수 있습니다.

다음은 탭 게시물의 기본 코드입니다.

<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for='fTabs-1' data-text='Tabs_1'></label>
  <label for='fTabs-2' data-text='Tabs_2'></label>
  <label for='fTabs-3' data-text='Tabs_3'></label>
</div>

<div class='tbCn'>
  <!--[ Tabs content ]-->
  <div class='tbText-1'>
    First tab here... 

  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-2'>
    Second tab here...
  
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-3'>
    Third tab here...

  </div>
</div>

참고

1. 탭 제목은 data-text='...' 속성을 변경하여 바꿉니다.
2. 탭의 모든 콘텐츠는 <div class='tbText-1'> 태그 내에 있어야 합니다.

게시물에 탭을 무제한으로 추가하려면 미리보기가 포함된 완전한 튜토리얼를 참조하십시오.