테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

다음지도 중심 표시 채택완료

구름빵 5년 전 조회 2,212
답변 1
목록

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_open">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_open

이 소스로 탭을 사용하려고 하는데,

 

iframe으로 삽입한 똑같은 지도가

첫번째 탭 (defaultOpen) 에서는 지도영역 중앙에 중심이 위치해서 잘 표시가 되는데,

두번째 탭에서는 중심이 좌상단으로 이동되어서 나타납니다. 

https://bohyunkr.cafe24.com/">https://bohyunkr.cafe24.com/

 

두번째탭을 default 로 설정하면 두번째가 잘 나오고 첫번째가 중심이 좌상단으로 나오는데,

지도소스는 아무리 손대봐도 안되고. ㅠ 조언부탁드립니다.

 

감사합니다. ^^;;

 

 

#다음지도
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
H
HappyTank
5년 전

이렇게 해보세요.

미리 지도를 로딩하지 마시고

각 탭을 클릭할때마다 로딩되도록 하시면 될 듯 합니다.

이유는 모르고... 걍 경험이고...

콘솔에서 테스트 해보니 가운데 잘 뜨네요.

 

<span> </span></p>

<pre id="line1">
<span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">London</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tabcontent</a>"></span><span>
  </span><span><<span class="start-tag">h3</span>></span><span>London</span><span></<span class="end-tag">h3</span>></span><span>
  </span><span><<span class="start-tag">p</span>><<span class="start-tag">iframe id="londonIFrame"</span> <span class="attribute-name">width</span>="<a class="attribute-value">1080px</a>" <span class="attribute-name">height</span>="<a class="attribute-value">600px</a>" <span class="attribute-name">src</span>="" <span class="attribute-name">frameborder</span>="<a class="attribute-value">0</a>" <span class="attribute-name">scrolling</span>="<a class="attribute-value">no</a>" <span class="attribute-name">marginwidth</span>="<a class="attribute-value">0</a>" <span class="attribute-name">marginheight</span>="<a class="attribute-value">0</a>"></<span class="end-tag">iframe</span>></span><span></<span class="end-tag">p</span>></span><span>
</span><span></<span class="end-tag">div</span>></span><span>

</span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">Paris</a>" <span class="attribute-name">class</span>="<a class="attribute-value">tabcontent</a>"></span><span>
  </span><span><<span class="start-tag">h3</span>></span><span>Paris</span><span></<span class="end-tag">h3</span>><span>
  </span><<span class="start-tag">p</span>><<span class="start-tag">iframe</span><span class="start-tag">id="parisIFrame"</span> <span class="attribute-name">width</span>="<a class="attribute-value">1080px</a>" <span class="attribute-name">height</span>="<a class="attribute-value">600px</a>" <span class="attribute-name">src</span>="" <span class="attribute-name">frameborder</span>="<a class="attribute-value">0</a>" <span class="attribute-name">scrolling</span>="<a class="attribute-value">no</a>" <span class="attribute-name">marginwidth</span>="<a class="attribute-value">0</a>" <span class="attribute-name">marginheight</span>="<a class="attribute-value">0</a>"></<span class="end-tag">iframe</span>></<span class="end-tag">p</span>></span><span> 
</span><span></<span class="end-tag">div</span>></span></pre>

<p><span><<span class="start-tag">script</span>></span></p>

<pre id="line1">
<span>function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    </span><span class="message-body-wrapper"><span class="message-flex-body"><span class="message-body devtools-monospace"><syntax-highlighted class="cm-s-mozilla"><span class="cm-variable">document</span>.<span class="cm-property">getElementById</span>(<span class="cm-string">"</span></syntax-highlighted></span></span></span><span><span class="start-tag">londonIFrame</span></span><span class="message-body-wrapper"><span class="message-flex-body"><span class="message-body devtools-monospace"><syntax-highlighted class="cm-s-mozilla"><span class="cm-string">"</span>).<span class="cm-property">src</span> <span class="cm-operator">=</span> <span class="cm-string">"<a href="https://bori0806.cafe24.com/map/wine365_map1.php"" target="_blank" rel="noopener noreferrer">https://bori0806.cafe24.com/map/wine365_map1.php"</a></span>;</syntax-highlighted></span></span></span> <span>
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    </span><span class="message-body-wrapper"><span class="message-flex-body"><span class="message-body devtools-monospace"><syntax-highlighted class="cm-s-mozilla"><span class="cm-variable">document</span>.<span class="cm-property">getElementById</span>(<span class="cm-string">"</span></syntax-highlighted></span></span></span><span><span class="start-tag">parisIFrame</span></span><span class="message-body-wrapper"><span class="message-flex-body"><span class="message-body devtools-monospace"><syntax-highlighted class="cm-s-mozilla"><span class="cm-string">"</span>).<span class="cm-property">src</span> <span class="cm-operator">=</span> <span class="cm-string">"<a href="https://bori0806.cafe24.com/map/wine365_map1.php"" target="_blank" rel="noopener noreferrer">https://bori0806.cafe24.com/map/wine365_map1.php"</a></span>;</syntax-highlighted></span></span></span> <span>
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

//최초 화면 로딩시 로딩 </span><span class="message-body-wrapper"><span class="message-flex-body"><span class="message-body devtools-monospace"><syntax-highlighted class="cm-s-mozilla"><span class="cm-variable"> (안해도 될려나? 이건 안뜨면 적용하세요.)
document</span>.<span class="cm-property">getElementById</span>(<span class="cm-string">"</span></syntax-highlighted></span></span></span><span><span class="start-tag">londonIFrame</span></span><span class="message-body-wrapper"><span class="message-flex-body"><span class="message-body devtools-monospace"><syntax-highlighted class="cm-s-mozilla"><span class="cm-string">"</span>).<span class="cm-property">src</span> <span class="cm-operator">=</span> <span class="cm-string">"<a href="https://bori0806.cafe24.com/map/wine365_map1.php"" target="_blank" rel="noopener noreferrer">https://bori0806.cafe24.com/map/wine365_map1.php"</a></span>;</syntax-highlighted></span></span></span> <span>
</<span class="end-tag">script</span>></span></pre>

<p> </p>

<p> </p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
구름빵
5년 전
정말 감사합니다. ^^

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인