[기타] '질풍의라빈'님이 문의하신 스크립트 입니다.

인벤 스크립트에 관심을 가져주셔서 감사합니다.

메우님의 탭 소스를 가로 방향으로 출력하는 것과 관련하여 문의 주셨는데요.
샘플 소스를 작성하여 전달 드립니다.

혹시 원하시던 형태와 다르거나, 이외에도 궁금하신 내용은 언제든지 글 남겨주세요.
감사합니다.


■ HTML을 누른 상태에서 붙여넣어 주세요.

---

<div data-inven-tabs>


<!-- 탭 버튼 첫번째 줄 -->
<div style="position:relative;height:26px;overflow:hidden;margin-bottom:4px;">

<div data-inven-tab-for="0" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:0px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">기록</div>

<div data-inven-tab-for="1" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">경험치표</div>

<div data-inven-tab-for="2" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">특수기능</div>

<div data-inven-tab-for="3" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">문의</div>

</div>

<!-- 탭 버튼 두번째 줄 -->
<div style="position:relative;height:26px;overflow:hidden;margin-bottom:4px;">

<div data-inven-tab-for="4" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:0px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">기록1</div>

<div data-inven-tab-for="5" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">경험치표1</div>

<div data-inven-tab-for="6" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">특수기능1</div>

<div data-inven-tab-for="7" data-inven-selected-css="{'_SELF_':{'top':'0px'}}" data-inven-unselected-css="{'_SELF_':{'top':'4px'}}" style="display:inline-block;position:relative;top:4px;padding: 4px 8px 8px 8px; border-radius: 6px 6px 0px 0px; background-color: #fbb2ab; color: white;">문의1</div>

</div>

<!-- 탭 본문 영역-->
<div data-inven-tab-id="0" style="min-height: 300px;">
기록 내용</div>

<div data-inven-tab-id="1" style="display: none;">
경험치표 내용</div>

<div data-inven-tab-id="2" style="display: none;">
특수기능 내용</div>

<div data-inven-tab-id="3" style="display: none;">
문의 내용</div>

<div data-inven-tab-id="4" style="display: none;">
기록1 내용</div>

<div data-inven-tab-id="5" style="display: none;">
경험치표1 내용</div>

<div data-inven-tab-id="6" style="display: none;">
특수기능1 내용</div>

<div data-inven-tab-id="7" style="display: none;">
문의1 내용</div>

</div>