|
2017-12-23 02:24
조회: 990
추천: 0
답변입니다.우선, 수정되지 않은 스크립트를 정리한 모습입니다. <div data-inven-tabs=""> <span data-inven-tab-for="tab_1"> <img src="https://static.inven.co.kr/column/2016/03/07/news/i11315632514.png"> </span> <span data-inven-tab-for="tab_2"> <img src="https://static.inven.co.kr/column/2016/03/07/news/i11339743120.png"> </span> <span data-inven-tab-for="tab_3"> <img src="https://static.inven.co.kr/column/2016/03/07/news/i11389756980.png"> </span> <div data-inven-tab-id="tab_1"><br><center> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i13202870198.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i14639640267.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15134329838.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15154665689.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15142894800.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i16494713102.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15157183978.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i16114633055.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i13599932767.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15166380474.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i14667351399.gif"></center> </div> <div data-inven-tab-id="tab_2"> <div style="text-align: center;" data-inven-tab-id="tab_2"><font face="궁서" size="4"><b>아키에이지</b></font> </div> <div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <핏빛전설> 스게머니@에안나</font></strike> </div> <div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <핏빛전설> / <서풍> 후랄프@에안나</font></strike> </div> <div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <레드리본> 후랄프네@에안나</font></strike> </div> <div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <레드리본> 임형@누이</font></strike> </div> <div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">리셋 <서비스종료> 임형@누이</font></strike> </div> <div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">리셋 <서비스종료> 뻐끔@누이</font></strike> </div> <div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <유선이가 쏘아올린 원정대> 뻐끔@누이</font></strike> </div> <div style="text-align: center;" data-inven-tab-id="tab_2"><strike><font size="2">누이아연합 <새봄> 잘생겨서죄송합니다@누이</font></strike> </div> <div style="text-align: center;" data-inven-tab-id="tab_2"><font size="2"><strike>누이아연합 <불타는 서대륙> 임형@누이</strike></font><font size="2"><b><br></b></font> </div> </div> </div> <div data-inven-tabs=""> <div style="text-align: center;" data-inven-tab-id="tab_2"><font size="2"><strike><br></strike></font> </div> </div> <font size="2"> <div><br> </div> </font> <div style="text-align: center;" data-inven-tabs="" data-inven-tab-id="tab_2"><b><font face="궁서" size="4">메이플스토리</font></b> </div> <div style="text-align: center;" data-inven-tabs="" data-inven-tab-id="tab_2"> <span style="font-size: 9pt;"><font size="2"><strike>플레임위자드 <포동> 엔끕@엘리시움</strike></font> </span> </div> <div style="text-align: center;" data-inven-tabs="" data-inven-tab-id="tab_2"> <span style="font-size: 9pt;"><font size="2"><strike><br></strike></font> </span> </div> <div style="text-align: center" data-inven-tabs="" data-inven-tab-id="tab_2"> <div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 16px; margin-left: 6px; border-radius: 6px; border: 1px solid #BE4BE5; overflow: hidden; font-size: 11px; padding: 0;" data-inven-nick-default="뻐끄미" data-inven-result-detail="" data-no-tooltip="" data-inven-action="last-attack-10,last-attack-20,last-attack-all,search-profile"> <span style="float: left; width: 130px; font-size: 11px; color: #BE4BE5; padding: 0 4px; height: 21px; line-height: 21px; border: 0;" data-inven-attr-for="input"> </span> <span style="float: left; margin: 0 0 0 1px; padding: 6px 4px 4px 4px; background-color: #BE4BE5; color: white; border: 0; font-size: 11px; line-height: 100%; height: auto;" data-inven-attr-for="button"> </span> <span style="background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 2px; margin-left: 6px; color: #BE4BE5; border-radius: 6px; border: 1px solid #BE4BE5; padding: 4px 6px; font-size: 11px; width: 300px;" data-inven-attr-for="action-result" data-position="out"> </span> </div> </div> <div data-inven-tabs="" data-inven-tab-id="tab_2"><br> </div> <div data-inven-tabs="" data-inven-tab-id="tab_3"><br><center> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/09/20/bbs/i13297641438.png"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/08/27/bbs/i11523752713.png"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i13161682349.jpg"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/08/03/bbs/i10332710657.jpg"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/06/22/bbs/i12298675049.jpg"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/06/30/bbs/i12782791626.jpg"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/02/10/bbs/i13102164769.gif"></center> </div> 아주.. 큰 문제점이 있습니다. 인벤 스크립트의 '탭' 의 기본 구조는 보통 이렇습니다. <!-- 탭 영역 선언 --> <div data-inven-tabs=""> <!-- 1번 탭버튼 --> <div data-inven-tab-for="1"> </div> <!-- 2번 탭버튼 --> <div data-inven-tab-for="2"> </div> <!-- 3번 탭버튼 --> <div data-inven-tab-for="3"> </div> <!-- 1번 탭내용 --> <div data-inven-tab-id="1"> </div> <!-- 2번 탭내용 --> <div data-inven-tab-id="2"> </div> <!-- 3번 탭내용 --> <div data-inven-tab-id="3"> </div> </div> <!-- 탭 영역 끝 --> 1. data-inven-tabs 속성으로, 탭을 사용할 영역을 지정합니다. 2. data-inven-tab-for 속성으로, 탭의 버튼을 각각 지정합니다. 3. data-inven-tab-id 속성으로, 탭의 내용을 각각 지정합니다. 그런데 기존 스크립트를 보시면 탭 관련 속성 사용이 잘못되어 있습니다. 탭 영역을 지정하는 tabs 속성을 너무 자주 사용하였고 (딱 1번만 최상위 태그에서 사용하면 됩니다) tabs 속성을 갖는 태그가 2번 탭에서 닫혀버렸으며, 2번 탭의 영역 구성이 잘못되어 있고 탭의 id를 불필요하게 탭 내용의 하위태그마다 중복 선언하였습니다. (역시 탭 내용의 상위 태그에서 딱 1번 사용하면 됩니다) 올바르게 수정한 스크립트입니다. <!-- 탭 영역 시작 --> <div data-inven-tabs=""> <span data-inven-tab-for="tab_1"> <img src="https://static.inven.co.kr/column/2016/03/07/news/i11315632514.png"> </span> <span data-inven-tab-for="tab_2"> <img src="https://static.inven.co.kr/column/2016/03/07/news/i11339743120.png"> </span> <span data-inven-tab-for="tab_3"> <img src="https://static.inven.co.kr/column/2016/03/07/news/i11389756980.png"> </span> <!-- 탭 1번 시작 --> <div data-inven-tab-id="tab_1"><br> <center> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i13202870198.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i14639640267.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15134329838.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15154665689.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15142894800.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i16494713102.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15157183978.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i16114633055.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i13599932767.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i15166380474.gif"> <img width="95%" src="https://upload2.inven.co.kr/upload/2017/07/03/bbs/i14667351399.gif"> </center> </div> <!-- 탭 1번 끝 --> <!-- 탭 2번 시작 --> <div data-inven-tab-id="tab_2"> <div style="text-align: center;"><font face="궁서" size="4"><b>아키에이지</b></font> </div> <div style="text-align: center;"><strike><font size="2">누이아연합 <핏빛전설> 스게머니@에안나</font></strike> </div> <div style="text-align: center;"><strike><font size="2">누이아연합 <핏빛전설> / <서풍> 후랄프@에안나</font></strike> </div> <div style="text-align: center;"><strike><font size="2">누이아연합 <레드리본> 후랄프네@에안나</font></strike> </div> <div style="text-align: center;"><strike><font size="2">누이아연합 <레드리본> 임형@누이</font></strike> </div> <div style="text-align: center;"><strike><font size="2">리셋 <서비스종료> 임형@누이</font></strike> </div> <div style="text-align: center;"><strike><font size="2">리셋 <서비스종료> 뻐끔@누이</font></strike> </div> <div style="text-align: center;"><strike><font size="2">누이아연합 <유선이가 쏘아올린 원정대> 뻐끔@누이</font></strike> </div> <div style="text-align: center;"><strike><font size="2">누이아연합 <새봄> 잘생겨서죄송합니다@누이</font></strike> </div> <div style="text-align: center;"><font size="2"><strike>누이아연합 <불타는 서대륙> 임형@누이</strike></font><font size="2"><b><br></b></font> </div> <div style="text-align: center;"><font size="2"><strike><br></strike></font> </div> <font size="2"> <div><br> </div> </font> <div style="text-align: center;"><b><font face="궁서" size="4">메이플스토리</font></b> </div> <div style="text-align: center;"> <span style="font-size: 9pt;"><font size="2"><strike>플레임위자드 <포동> 엔끕@엘리시움</strike></font> </span> </div> <div style="text-align: center;"> <span style="font-size: 9pt;"><font size="2"><strike><br></strike></font> </span> </div> <div style="text-align: center"> <div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 16px; margin-left: 6px; border-radius: 6px; border: 1px solid #BE4BE5; overflow: hidden; font-size: 11px; padding: 0;" data-inven-nick-default="뻐끄미" data-inven-result-detail="" data-no-tooltip="" data-inven-action="last-attack-10,last-attack-20,last-attack-all,search-profile"> <span style="float: left; width: 130px; font-size: 11px; color: #BE4BE5; padding: 0 4px; height: 21px; line-height: 21px; border: 0;" data-inven-attr-for="input"> </span> <span style="float: left; margin: 0 0 0 1px; padding: 6px 4px 4px 4px; background-color: #BE4BE5; color: white; border: 0; font-size: 11px; line-height: 100%; height: auto;" data-inven-attr-for="button"> </span> <span style="background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 2px; margin-left: 6px; color: #BE4BE5; border-radius: 6px; border: 1px solid #BE4BE5; padding: 4px 6px; font-size: 11px; width: 300px;" data-inven-attr-for="action-result" data-position="out"> </span> </div> </div> </div> <!-- 탭 2번 끝 --> <!-- 탭 3번 시작 --> <div data-inven-tab-id="tab_3"><br> <center> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/09/20/bbs/i13297641438.png"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/08/27/bbs/i11523752713.png"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i13161682349.jpg"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/08/03/bbs/i10332710657.jpg"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/06/22/bbs/i12298675049.jpg"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/06/30/bbs/i12782791626.jpg"> <img width="95%" src="https://upload2.inven.co.kr/upload/2016/02/10/bbs/i13102164769.gif"> </center> </div> <!-- 탭 3번 끝 --> </div> <!-- 탭 영역 끝 --> 위 소스코드 전체를 복사하여, 인벤토리에서 HTML 모드로 붙여넣으시면 됩니다. ![]() * 스크립트로만 나오는 것은, HTML 모드를 누르지 않고 스크립트를 그대로 저장하여 그렇습니다. |

Want 

