[기타] '아이즈원'님이 문의하신 스크립트 입니다.

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

문의하신 탭 기능은,
data-inven-tab-id 값만 고유하게 사용해 주신다면 몇 개의 탭이든, 탭 속에 탭을 얼마든지 넣어서 사용하실 수 있습니다.

올려주신 내용의 전체 소스를 제공해 드리는 것은 소스를 이해하는데 혼란이 많을 수 있습니다.
향후 편집을 위해 소스를 이해해 주시는 편이 더 도움이 될 것 같네요.


탭의 기본적인 소스 구성은 아래와 같습니다. 짧게 구성했으니 이해하는 데에는 어려움이 없으실 겁니다.

<!-- 이 내용을 통해서 탭을 만듭니다. 그리고 아무것도 선택되어 있지 않게 (none) 합니다. -->
<div data-inven-tabs data-inven-tab-selected="none">

<!-- 탭 버튼들 -->
<div data-inven-tab-for="tab1_1">1번 버튼</div>
<div data-inven-tab-for="tab1_2">2번 버튼</div>
<div data-inven-tab-for="tab1_3">3번 버튼</div>

<!-- 탭 내용들 -->
<div data-inven-tab-id="tab1_1">1번 내용</div>
<div data-inven-tab-id="tab1_2">2번 내용</div>
<div data-inven-tab-id="tab1_3">3번 내용</div>

<!-- 탭을 종료 시킵니다. -->
</div>

설명
- 탭을 만들때는 항상 <div data-inven-tabs> 로 시작해서 </div>로 닫아주어야 합니다.
- data-inven-tab-for는 data-inven-tab-id와 동일한 이름으로 연결되어야 합니다.
- data-inven-tab-id는 고유한 이름을 가져야 합니다. 만일 동일한 이름을 가지고 있으면, 같은 이름을 가지고 있는 탭이 동시에 열리게 됩니다.


탭 속에 탭을 넣기 위해서는 위 소스를 그대로 내용에 넣어 주시고 data-inven-tab-for와 data-inven-tab-id 값만 고유하게 바꿔 주시면 됩니다.
3번 탭 내용 속에 넣어 보도록 하겠습니다.


<div data-inven-tabs data-inven-tab-selected="none">

<div data-inven-tab-for="tab1_1">1번 버튼</div>
<div data-inven-tab-for="tab1_2">2번 버튼</div>
<div data-inven-tab-for="tab1_3">3번 버튼</div>

<div data-inven-tab-id="tab1_1">1번 내용</div>
<div data-inven-tab-id="tab1_2">2번 내용</div>
<div data-inven-tab-id="tab1_3">
<!-- 3번 탭 내용이 시작 되고, 위의 소스를 거의 그대로 복붙했습니다. -->
<div data-inven-tabs data-inven-tab-selected="none">

<div data-inven-tab-for="tab3_1">3_1번 버튼</div>
<div data-inven-tab-for="tab3_2">3_2번 버튼</div>
<div data-inven-tab-for="tab3_3">3_3번 버튼</div>

<div data-inven-tab-id="tab3_1">3_1번 내용</div>
<div data-inven-tab-id="tab3_2">3_2번 내용</div>
<div data-inven-tab-id="tab3_3">3_3번 내용</div>

</div><!-- 3번 탭 속에 삽입된 탭을 닫는 /div 입니다.-->
</div><!-- 3번 탭 내용을 닫는 /div 입니다.-->
</div><!-- 메인 탭을 닫는 /div 입니다.-->

설명
- 그대로 복붙하였고, data-inven-tab-for와 data-inven-tab-id 값만 수정한 것을 보실 수 있습니다.


문의하셨던 내용을 보면
처음에 4개의 탭이 있고, 각 탭 속에는 또 다른 탭이있고, 그 속에 한 번 더 탭이 있습니다.
위에 말씀드렸던 내용을 이용하면, data-inven-tab-for와 data-inven-tab-id 값만 고유하게 수정하면 몇 개의 탭이든지 넣을 수 있습니다.
3개의 탭이 중첩된 예시입니다. id를 구분하기 쉽게 지어주시는 편이 향후 수정이 쉽습니다.


<div data-inven-tabs data-inven-tab-selected="none">

<div data-inven-tab-for="tab1_1">1번 버튼</div>
<div data-inven-tab-for="tab1_2">2번 버튼</div>
<div data-inven-tab-for="tab1_3">3번 버튼</div>

<div data-inven-tab-id="tab1_1">1번 내용</div>
<div data-inven-tab-id="tab1_2">2번 내용</div>
<div data-inven-tab-id="tab1_3">

<div data-inven-tabs data-inven-tab-selected="none">

<div data-inven-tab-for="tab3_1">3_1번 버튼</div>
<div data-inven-tab-for="tab3_2">3_2번 버튼</div>
<div data-inven-tab-for="tab3_3">3_3번 버튼</div>

<div data-inven-tab-id="tab3_1">3_1번 내용</div>
<div data-inven-tab-id="tab3_2">3_2번 내용</div>
<div data-inven-tab-id="tab3_3">

<div data-inven-tabs data-inven-tab-selected="none">

<div data-inven-tab-for="tab3_3_1">3_3_1번 버튼</div>
<div data-inven-tab-for="tab3_3_2">3_3_2번 버튼</div>
<div data-inven-tab-for="tab3_3_3">3_3_3번 버튼</div>

<div data-inven-tab-id="tab3_3_1">3_3_1번 내용</div>
<div data-inven-tab-id="tab3_3_2">3_3_2번 내용</div>
<div data-inven-tab-id="tab3_3_3">3_3_3번 내용</div>

</div>
</div>
</div>
</div>
</div>

소스가 길어졌지만, 같은 폼을 계속 붙여넣고 있기 때문에 이해하기에는 쉬우실 겁니다.
이 속에 사용하고 계셨던 스타일을 일괄 붙여넣어 주시면 레이아웃도 완성할 수 있습니다.

수정에 어려움이 있으시거나, 이외에도 궁금하신 내용은 언제든지 글 남겨주세요.
감사합니다.