본문 바로가기
PROGRAM/JQuery

span 메뉴 클릭시 해다메뉴 색상 변경 및 iframe으로 Link 이동시키기 및 iframe resizing

by 반화넬 2012. 10. 31.
반응형


span 메뉴 클릭시 해다메뉴 색상 변경 및 iframe으로 Link 이동시키기 및 iframe resizing

<style>
span {cursor:pointer;}
</style>
<script language="javascript">
var spanArr = new Array('Link1','Link2','Link3','Link4','Link5','Link6','Link7','Link8','Link9');

$("#spanNavi span").live('click', function(e) {
    e.preventDefault;
    this.blur();

 var spanindex=$("#spanNavi span").index(this);
 $("#pageChngfrm").attr("src",spanArr[spanindex]);

 $("#spanNavi span").css("color","#000000");
 $(this).css("color","red");


});

function autoResize(i){   
 var iframeHeight=(i).contentWindow.document.body.scrollHeight;  (i).height=iframeHeight+20;
 var iframeWidth=(i).contentWindow.document.body.scrollWidth;  (i).width=iframeWidth+20;

}

</script>
<div id="spanNavi">
<table border='1' width="600">
<tr align=center>
<td width="11%"><span>1</span></td>
<td width="11%"><span>2</span></td>
<td width="11%"><span>3</span></td>
<td width="11%"><span>4</span></td>
<td width="11%"><span>5</span></td>
<td width="11%"><span>6</span></td>
<td width="11%"><span>7</span></td>
<td width="11%"><span>8</span></td>
<td width="11%"><span>9</span></td>
</tr>
</table>
</div>

<iframe id='pageChngfrm' src="about:blank"  onload="autoResize(this)"></iframe>

반응형