탭태그에서 메뉴 3개를 만들으려합니다.
아래 인장소스는 인벤 스크립트 게시물에서 탭태그를 보고 만들었습니다
하지만 동시에 아래 세가지 기능을 좀 더 추가하고싶어 문의드려봅니다.
1. 처음부터 탭태그의 내용을 모두 접어두려면 어떻게 해야하나요.
현재 탭태그에서는 가장 첫번째 메뉴의 탭내용이 무조건적으로 펼쳐져 모두 다 접어두고 싶어요.
2. 탭태그의 내용이 길어서
2-1.펼쳐진 탭버튼을 다시 눌렀을 때 해당 탭의 내용을 접는 법과 (+이 때 다른 5개의 탭메뉴의 내용도 모두다 접어져 처음 모든 탭이 접힌상태로)
2-2 인장이 긴 관계로 해당 탭의 내용을 눌러도 내용이 접혔으면 좋겠습니다.
인벤 스크립트 전에는
이러한 태그로 위 문제들을 해결했었는데
바뀐 다음에는 이건 이제 적용안되는것같고 똑같이 하려면 어떻게 해야할지 모르겠어요
제 인장에서 보시면 경험치표 1개짜리 메뉴는 hide 이용해서 메뉴를 눌러도 내용을 눌러도 잘 열고 닫아지는데
메뉴가 여러개 될 경우 제가 잘못적용한건지 hide가 안먹히네요ㅠ
아래는 탭태그 메뉴5개 기본틀입니다
+div 로 구현이되었으면 좋겠어요. a herf는 밑줄에 링크표시가 되어서
+3. 마지막으로 다른버전으로 탭기능에서 인장을 펼친후 펼쳐진 내용 하단에
인장 닫기라는 버튼을 만들고 싶어요. 이부분도 알려주셨으면 좋겠습니다.
결과적으로 총 3개의 탭에서
1. 처음에 인장을 열었을시 3개의 탭내용이 모두 닫히기
2. 하나의 탭을 누르면 다른 탭에서 열었던 내용 모두 닫히기
3. 특정탭에서는 내용을 누르면 탭내용이 닫히기
4. 또다른 특정탭에서는 하단에 인장내용닫기가 있어 닫기글귀를 누르면 인장내용이 접히기
가 옛날에는 동시에 구현이 되어 인장에 썼었는데 옛날태그로는 다 막혀서
지금도 구현이 되었으면 좋겠습니다.
-------------------------------------------------------
<div data-inven-tabs>
<!-- 탭 버튼 부분 -->
<span data-inven-tab-for="A"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"> 탭 버튼 A </span >
<span data-inven-tab-for="B"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"> 탭 버튼 B </span >
<span data-inven-tab-for="C"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"> 탭 버튼 C </span >
<div data-inven-tab-id="A" style="display:none;">
A 영역
</div>
<div data-inven-tab-id="B" style="display:none;">
B 영역
</div>
<div data-inven-tab-id="C" style="display:none;">
C 영역
</div>
</div>
------------------------------------------
수지
수지
