[제보] 탭 만들기 질문

 

현재 제 인장에서 빨간 박스가 쳐진 이미지를 클릭하면 그림처럼 새창에 내용이 뜨게 만들고 싶은데 자꾸 꼬입니다.

 

고수 분들 도와주세요ㅠ

 

 

<div data-inven-tab-id="3" style="display: none;"><!--메뉴 3 내용-->
    <div style="display: block; width: 397px; height:670px; overflow:scroll; overflow-x:hidden; background-image: url('https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png'); border-radius: 6px; border: 1px solid #9ebede;">
      <div style="border-bottom: 1px solid #9ebede; color: #9ebede;padding: 4px 8px; font-weight: bold;">정보보기</div>
     <div style="padding: 4px 8px;">
<div data-inven-tabs>
    <!-- 탭 버튼 부분 -->
 <div data-inven-tab-for="tab_1"
         data-inven-selected-css="{'_SELF_':{'padding':'6px'}}"
         data-inven-unselected-css="{'_SELF_':{'padding':'6px'}}"
         style="width:100px; margin:1px; padding: 1px 1px; border-radius: 0px 0px 0px 0px; text-align:center; border: 1px solid #9ebede; background-color: #ffffff; color: #9ebede; cursor: pointer;float:left;"> <img src="https://upload2.inven.co.kr/upload/2016/04/15/bbs/i12679318876.png" width="100" style="margin-top:2px;margin-bottom:2px;"> </div>
 <div data-inven-tab-for="tab_2"
         data-inven-selected-css="{'_SELF_':{'padding':'6px'}}"
         data-inven-unselected-css="{'_SELF_':{'padding':'6px'}}"
         style="width:100px; margin:1px; padding: 1px 1px; border-radius: 0px 0px 0px 0px; text-align:center; border: 1px solid #9ebede; background-color: #ffffff; color: #9ebede; cursor: pointer;float:left;"> <img src="https://upload2.inven.co.kr/upload/2016/04/15/bbs/i13335705531.png" width="100" style="margin-top:2px;margin-bottom:2px;"> </div>
 <div data-inven-tab-for="tab_3"
         data-inven-selected-css="{'_SELF_':{'padding':'6px'}}"
         data-inven-unselected-css="{'_SELF_':{'padding':'6px'}}"
         style="width:100px; margin:1px; padding: 1px 1px; border-radius: 0px 0px 0px 0px; text-align:center; border: 1px solid #9ebede; background-color: #ffffff; color: #9ebede; cursor: pointer;float:left;"> <img src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i12264688534.png" width="100" style="margin-top:2px;margin-bottom:2px;"> </div>
    <div style="clear: left;"></div>

    <!-- 탭 내용 부분 -->
    <br>
    <div data-inven-tab-id="tab_1" style="border: 1px solid #9ebede; border-radius: 5px 5px 5px 5px; padding: .4em;">공사중1</div>
    <div data-inven-tab-id="tab_2" style="border: 1px solid #9ebede; border-radius: 2px 2px 2px 2px; padding: .4em;"><img src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i12860735484.png" style="margin-left:3px;"><img src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i12860735484.png"><img src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i12860735484.png"><img src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i12860735484.png"><img src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i12860735484.png"><img src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i12860735484.png"><img src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i12860735484.png"><img src="https://upload2.inven.co.kr/upload/2016/04/16/bbs/i12860735484.png"></div>
    <div data-inven-tab-id="tab_3" style="border: 1px solid #9ebede; border-radius: 2px 2px 2px 2px; padding: .4em;">공사중3</div>
</div>

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