따로 스크립트 파일을 만들어 업로드 했는데 작동이 안됩니다.
본문
아래 스크립트를 따로 .js 파일로 만들어서 서버에 올렸는데 작동이 안됩니다.
제가 디자이너라서 스크립트는 잘 모르는데요 혹시 아래 스크립트가 잘못된건지... 아니면 왜 작동이 안되는건지 알수 있을까요..?ㅠㅠ
html 파일로 테스트 해보면 잘 작동되는데 서버에 올리면 작동이 안됩니다...
content.skin.php 파일 안에 css 파일 삽입하는 곳 바로 밑에 아래처럼 넣었거든요.
add_javascript('<script src="'.G5_THEME_JS_URL.'/onmouse_img.js"></script>', 10);
다른 js파일 작업할때도 동일하게 추가해서 작동이 잘되었는데.. 이 스크립트는 자체에 코딩 선언이나 그런것이 잘못된것인지... 고수님들 한번만 봐주시길 부탁드립니다..ㅠㅠ
// JavaScript Document
function show_layer(div_name){
document.all.tab_01.style.display="none"; document.all.tab_02.style.display="none"; document.all.tab_03.style.display="none";
//document.all.tab_04.style.display="none"; document.all.tab_05.style.display="none";
document.all.tab_06.style.display="none";
document.all.tab_07.style.display="none"; document.all.tab_08.style.display="none"; document.all.tab_09.style.display="none";
//document.all.tab_10.style.display="none";
document.all.tab_11.style.display="none";
document.all.tab_12.style.display="none";
//document.all.tab_13.style.display="none";
document.all.tab_14.style.display="none";
document.all.tab_15.style.display="none";
document.all.tab_16.style.display="none";
document.all.tab_17.style.display="none";
document.all.tab_18.style.display="none";
switch(div_name) {
case 'tab01': document.all.tab_01.style.display=""; break;
case 'tab02': document.all.tab_02.style.display=""; break;
case 'tab03': document.all.tab_03.style.display=""; break;
//case 'tab04': document.all.tab_04.style.display=""; break;
//case 'tab05': document.all.tab_05.style.display=""; break;
case 'tab06': document.all.tab_06.style.display=""; break;
case 'tab07': document.all.tab_07.style.display=""; break;
case 'tab08': document.all.tab_08.style.display=""; break;
case 'tab09': document.all.tab_09.style.display=""; break;
//case 'tab10': document.all.tab_10.style.display=""; break;
case 'tab11': document.all.tab_11.style.display=""; break;
case 'tab12': document.all.tab_12.style.display=""; break;
//case 'tab13': document.all.tab_13.style.display=""; break;
case 'tab14': document.all.tab_14.style.display=""; break;
case 'tab15': document.all.tab_15.style.display=""; break;
case 'tab16': document.all.tab_16.style.display=""; break;
case 'tab17': document.all.tab_17.style.display=""; break;
case 'tab18': document.all.tab_18.style.display=""; break;
}
}
답변 3
파일 위치가 맞는지 확인해보세요....
네 파일 위치는 정확히 맞습니다. 경로 풀어서 브라우저에서 onmouse_img.js 파일 다운도 받아 봤구요.... 스크립트 자체에는 문제가 없는게 맞을까요?.. 근데 왜 안되는걸까요...ㅠㅠ
id="tab_01" 와 같이 정의된 요소가 존재 하는지 보세요..
show_layer(이 부분에 $bo_table 과 같이 게시판 아이디가 입력될 것 같습니다);
switch(div_name) { }
이 부분에서 해당 게시판이면 display none 에서 "" 으로 설정되어서 보여지게 되는 것입니다.
아 이게 서브메뉴 보여지는 탭은 아니구요 이미지 갤러리 같은 거랍니다.
전체코드는 이렇게 된 코드입니다.(너무 길어서 tab_01 만 올립니다. 이미지경로는 임시작성된거라 서버경로대로 작성해서 올렸고 잘 보입니다.)
이게 html 에서는 잘 작동되나 서버에 올리면 css는 적용되는데, 스크립트만 작동이 안되거든요... 소스상 어디가 문제인지를 모르겠습니다...ㅠㅠ
=====================================
<style>
.tablayer {width:100%; padding:20px 0 0;}
.tablayer img {width:100%;}
.tablayer .tabimages {border-top:2px solid #333333; border-bottom:1px solid #333333;}
.tablayer .tabmenu {width:100%; text-align:left; padding:10px 0 0 0;}
.tablayer .tabmenu ul {padding:0; margin:0;}
.tablayer .tabmenu li {float:left; list-style:none; width:107px; padding:0; margin:0 3px 10px; text-align:center; font-size:13px; color:#333333; font-family:"나눔고딕"; font-weight:400; cursor:pointer; border:1px solid #ffffff;}
.tablayer .tabmenu .bordercolor {border:1px solid #006fb9; color:#006fb9;}
.tablayer .tabmenu .nonpadding {margin-right:0;}
</style>
<style>
.tablayer {width:100%; padding:20px 0 0;}
.tablayer img {width:100%;}
.tablayer .tabimages {border-top:2px solid #333333; border-bottom:1px solid #333333;}
.tablayer .tabmenu {width:100%; text-align:left; padding:10px 0 0 0;}
.tablayer .tabmenu ul {padding:0; margin:0;}
.tablayer .tabmenu li {float:left; list-style:none; width:107px; padding:0; margin:0 3px 10px; text-align:center; font-size:13px; color:#333333; font-family:"나눔고딕"; font-weight:400; cursor:pointer; border:1px solid #ffffff;}
.tablayer .tabmenu .bordercolor {border:1px solid #006fb9; color:#006fb9;}
.tablayer .tabmenu .nonpadding {margin-right:0;}
</style>
<div id="tab_01" class="tablayer" style="display: none;">
<div class="tabimages"><img src="skin/body/sub0301img01.jpg" border="0"></div>
<div class="tabmenu"><ul>
<li onmouseover="javascript:show_layer('tab01');" class="bordercolor"><img src="skin/body/sub0301img01.jpg" border="0"><br>CNC재단기</li>
<li onmouseover="javascript:show_layer('tab14');" class=""><img src="skin/body/sub0301img14.jpg" border="0"><br>CNC재단기2호기</li>
<li onmouseover="javascript:show_layer('tab02');" class=""><img src="skin/body/sub0301img02.jpg" border="0"><br>수직각면취기#1</li>
<li onmouseover="javascript:show_layer('tab03');" class=""><img src="skin/body/sub0301img03.jpg" border="0"><br>수직각면취기#2</li>
<!--li onmouseover="javascript:show_layer('tab04');" class=""><img src="skin/body/sub0301img04.jpg" border="0"><br>양각면취기</li>
<li onmouseover="javascript:show_layer('tab05');" class=""><img src="skin/body/sub0301img05.jpg" border="0"><br>천공기</li-->
<li onmouseover="javascript:show_layer('tab06');" class=""><img src="skin/body/sub0301img06.jpg" border="0"><br>세척건조기</li>
<li onmouseover="javascript:show_layer('tab07');" class=""><img src="skin/body/sub0301img07.jpg" border="0"><br>수평강화로1기</li>
<li onmouseover="javascript:show_layer('tab08');" class=""><img src="skin/body/sub0301img08.jpg" border="0"><br>수평강화로2기#1</li>
<li onmouseover="javascript:show_layer('tab09');" class=""><img src="skin/body/sub0301img09.jpg" border="0"><br>수평강화로2기#2</li>
<!--li onmouseover="javascript:show_layer('tab10');" class=""><img src="skin/body/sub0301img10.jpg" border="0"><br>대차기</li-->
<li onmouseover="javascript:show_layer('tab11');" class=""><img src="skin/body/sub0301img11.jpg" border="0"><br>오토씨밍기</li>
<li onmouseover="javascript:show_layer('tab12');" class=""><img src="skin/body/sub0301img12.jpg" border="0"><br>오토씨밍기</li>
<!--li onmouseover="javascript:show_layer('tab13');" class=""><img src="skin/body/sub0301img13.jpg" border="0">페이퍼면취기</li-->
<li onmouseover="javascript:show_layer('tab15');" class=""><img src="skin/body/sub0301img15.jpg" border="0"><br>오토크레이브</li>
<li onmouseover="javascript:show_layer('tab16');" class=""><img src="skin/body/sub0301img16.jpg" border="0"><br>접합 예압로</li>
<li onmouseover="javascript:show_layer('tab17');" class=""><img src="skin/body/sub0301img17.jpg" border="0"><br>접합라인</li>
<li onmouseover="javascript:show_layer('tab18');" class=""><img src="skin/body/sub0301img18.jpg" border="0"><br>힛속로</li>
</ul></div>
</div>
제이쿼리를 사용하면 됩니다.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
<!--
$(function(){
show_layer = function(div_name) {
$('.tablayer').hide();//전체 div 안보이게
$('#'+div_name).show();//전달받은 id div 만 보이게
}
show_layer('tab_01');
});
//-->
</script>
<div id="tab_01" class="tablayer" style="display: none;">
탭1
</div>
<div id="tab_02" class="tablayer" style="display: none;">
탭2
</div>