[기타] '크베닌'님이 문의하신 소스 입니다.

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

탭 스크립트는 현재 인벤 스크립트 게시판 상단과 같이 "접히는 것을 상정하지 않은" 태그입니다.
그러므로 탭 스크립트를 이용하면서 접고 펼치는 기능을 동시에 이용하려 한다면 소스가 상당히 복잡해질 수 있습니다.

오히려 기본적인 toggle, hide 스크립트 쪽이 적당할 것으로 보입니다.

요청하신 내용을 바탕으로 수정(탭 스크립트 이용) 및 새로 작성한 스크립트(탭 스크립트 이용 안함)는 아래를 참고해 주세요.

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



■ 탭 소스를 이용하여 구성

---

<div data-inven-tabs="" data-inven-tab-selected="none"> 
<!-- 탭 버튼 부분 -->

<div data-inven-tab-for="tab_1"
data-inven-selected-css="{'_SELF_':{'display':'none'},'tab_1_sudo':{'display':'block'}}"
data-inven-unselected-css="{'_SELF_':{'display':'block'},'tab_1_sudo':{'display':'none'}}"
style="border:1px solid; width:60px; padding: .4em; float:left;"> 탭 버튼 1 </div>

<div data-inven-id="tab_1_sudo" data-inven-tab-for="tab_1_sudo"
data-inven-selected-css="{'_SELF_':{'display':'none'}}"
style="border:1px solid; width:60px; padding: .4em; float:left;font-weight:bold;display:none;"> 탭 버튼 1 </div>

<div data-inven-tab-for="tab_2"
data-inven-selected-css="{'_SELF_':{'display':'none'},'tab_2_sudo':{'display':'block'}}"
data-inven-unselected-css="{'_SELF_':{'display':'block'},'tab_2_sudo':{'display':'none'}}"
style="border:1px solid; width:60px; padding: .4em; float:left;"> 탭 버튼 2 </div>

<div data-inven-id="tab_2_sudo" data-inven-tab-for="tab_2_sudo"
data-inven-selected-css="{'_SELF_':{'display':'none'}}"
style="border:1px solid; width:60px; padding: .4em; float:left;font-weight:bold;display:none;"> 탭 버튼 2 </div>

<div style="clear: left;"><br></div>


<!-- 탭 내용 부분 -->
<div data-inven-tab-id="tab_1" style="border: 1px solid red; padding: .4em;">탭 1번 내용입니다.</div>
<div data-inven-tab-id="tab_2" style="border: 1px solid blue; padding: .4em;">탭 2번 내용입니다.</div>
</div>



■ 탭 소스를 이용하지 않고 구성

---

<!-- 탭 버튼 부분 -->
<div style="border:1px solid; width:60px; padding: .4em; float:left;" data-inven-toggle="tab_1" data-inven-hide="tab_2"> 탭 버튼 1 </div>
<div style="border:1px solid; width:60px; padding: .4em; float:left;" data-inven-toggle="tab_2" data-inven-hide="tab_1"> 탭 버튼 2 </div>
<div style="clear: left;"><br></div>

<!-- 탭 내용 부분 -->
<div data-inven-id="tab_1" style="border: 1px solid red; padding: .4em;display:none;">탭 1번 내용입니다.</div>
<div data-inven-id="tab_2" style="border: 1px solid blue; padding: .4em;display:none;">탭 2번 내용입니다.</div>