카테고리:이상해요? 조회 : 105
안녕하세요?
자스 코딩중에 엉뚱?한 경우가 있어서 이렇게 글 올립니다.
아래 소스를 보시면 innerHTML로 테그를 넣어 주면 해당 값을 인식하지 못합니다
그런데 innerHTML로 입력할 테그를 해당 레이어에 넣으면 제가 원하는 결과가
나옵니다
<html>
<head>
<style type="text/css">
<!--
td { font-size: 9pt; }
.menucss
{
margin-top: -3px;
padding: 2px;
background-color:#F7F7F7;
border: 1px solid #FF7200;
position: absolute;
width: 170;
z-index: 1;
height: auto;
filter: alpha(opacity=90);
}
//-->
</style>
<script language="javascript">
<!--
function test (show)
{
// HTML 이게 문제가 됩니다
html = '<table border="0" onMouseOver="javascript:test(0);">'
+ '<tr><td>1111111111</td></tr>'
+ '<tr><td>2222222221</td></tr>'
+ '<tr><td>3333333333</td></tr>'
+ '<tr><td>4444444444</td></tr>'
+ '</table>';
document.getElementById('test1').innerHTML = html;
document.getElementById('test').style.display = (show == '0') ? '' : 'none';
}
//-->
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="120" align="center">
<tr height="30">
<td onMouseOver="javascript:test(0)" onMouseOut="javascript:test(1)" align="center">
<a href="javascript:">메뉴 1</a>
</td>
</tr>
<tr>
<td id="test" style="display:none" onMouseOver="javascript:test(0)" onMouseOut="javascript:test(1)">
<!-- 이 div 부분을 아래와 같이 변경하면 원하는 결과가 나옵니다 //-->
<div id="test1" class="menucss"></div>
<!-- 이렇게 하면 나옵니다
<table border="0" onMouseOver="javascript:test(0);">
<tr><td>1111111111</td></tr>
<tr><td>2222222221</td></tr>
<tr><td>3333333333</td></tr>
<tr><td>4444444444</td></tr>
</table>
//-->
</td>
</tr>
</table>
</body>
</html>
제가 원하는 결과는 이러 합니다..
메뉴 1에 마우스를 올리면 하위 메뉴가 레이어로 나오게 할려합니다.
이때 마우스가 벗어나면 해달 레이어를 닫기 때문에 하위 메뉴 레이어에
마우스 오버 이벤트를 걸어서 하위 메뉴로 마우스가 이동하면 닫는걸 방지
할려고 합니다..
그런데 html를 직접 넣으면 문제되지 않지만
자바스크립트 innerHTML을 이용하며출력은 되지만 하위 메뉴 마우스 이벤트가
발생하지 않습니다..
원인이 뭔지 아신다면 답변부탁합니다...
감사합니다.
| 제목 |
|---|
| 태그 적용 |
| 여보세요? 손님도 적으실 수 있습니다. 11 |
