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

문의하신 소스를 전달 드립니다.

요청하신 내용은 탭 소스로는 구현할 수 업서, 모든 버튼 및 본문에 id를 부여하고,
모든 케이스에 대한 hide, show를 선언하여 구현하였습니다.
버튼이 선택되었을 때의 동작은 가짜 버튼(sudo) 만들어 별도로 동작을 지정하였습니다.

마우스 오버시의 버튼 스타일이 바뀌는 소스(over-css, out-css)는 "탭 버튼 A"를 참고해 주세요.
탭이 선택되었을 때 버튼이 변경(텍스트/스타일) 되는 것은 "탭 버튼 B"를 참고해 주세요.
아무런 변경 없는 샘플 버튼은 "탭 버튼 C"를 참고해 주세요.

이와 같이 커스텀 액션이 많이 들어가는 경우는 유지, 보수, 확장에 어려움이 많은 관계로 기본 소스 원본을 보관하기를 권장 드립니다.

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



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

<!-- 버튼 영역 -->
<span data-inven-toggle="A" data-inven-show="tbb,tbc" data-inven-hide="B,C,tbb_sudo,tbc_sudo">
<span data-inven-id="tba_1" data-inven-over-css="{'tba_1':{'display':'none'},'tba_2':{'display':'inline-block'}}">탭 버튼 A</span>
<span data-inven-id="tba_2" data-inven-out-css="{'tba_2':{'display':'none'},'tba_1':{'display':'inline-block'}}" style="display:none; font-weight:bold;">D 버튼 탭</span>
</span>

<span data-inven-show="B,tbb_sudo,tbc" data-inven-hide="A,C,tbb,tbc_sudo" data-inven-id="tbb">탭 버튼 B</span>
<span data-inven-hide="B,C,tbb_sudo,tbc_sudo" data-inven-show="A,tbb,tbc" data-inven-id="tbb_sudo" style="display:none;color:red;font-weight:bold;">B 닫기 버튼</span>

<span data-inven-show="C,tbc_sudo,tbb" data-inven-hide="A,B,tbc,tbb_sudo" data-inven-id="tbc">탭 버튼 C</span>
<span data-inven-hide="B,C,tbc_sudo,tbb_sudo" data-inven-show="A,tbc,tbb" data-inven-id="tbc_sudo" style="display:none;">탭 버튼 C</span>

<!-- 본문 영역 -->
<div data-inven-id="A">
■ A 영역<br>
- 기본으로 표시되어 있을 것<br>
- 다른 탭을 선택시 사라질 것<br>
- 다른 탭을 누를 시 숨길 것<br>
- A 영역이 보이는 동안, 다시 A 탭 버튼을 누르면 A영역이 숨겨질 것<br>
</div>

<div data-inven-id="B" style="display:none;">
■ B 영역<br>
- B 영역 탭 본문
- 닫기 버튼 클릭시, A 영역이 표시될 것
- B 영역 선택시, 버튼의 문장/스타일 바뀌기.
- B에서 다른 버튼을 누른 경우, B 버튼 정상화
<div data-inven-toggle="B,A">닫기 버튼 샘플</div>
</div>

<div data-inven-id="C" style="display:none;" data-inven-hide="B,C,tbc_sudo,tbb_sudo" data-inven-show="A,tbc,tbb">
■ C 영역<br>
- C 영역을 선택해도 버튼 형태 유지 샘플.
</div>