마우스 올려 놓으면 내용 저절로 변하는 탭메뉴

살과 옷을 입히는 일은 직접해보세요. ^^ <script>
function change(obj) {
First.style.display = "none";
Second.style.display = "none"; obj.style.display = "block";
}
</script> <div id="First" style="display:block">
<span style="background-color:yellow">첫번째</span> <span onMouseOver="change(Second)" style="background-color:gray">두번째</span>
<br>첫번째 내용
</div>
<div id="Second" style="display:none">
<span onMouseOver="change(First)" style="background-color:gray">첫번째</span> <span style="background-color:yellow">두번째</span>
<br>두번째 내용
</div>



부연설명 :
style속성의 display 스타일 속성 값을 block과 none으로 바꾸면서
해당 개체를 사리지거나 나타나게 할 수 있습니다.

이걸 이용해서,

First라고 id값을 준 div태그로 첫번째 메뉴 탭과 내용을 감싸고
화면에 보이는 상태(blick)로 해두고

Second라고 id값을 준 div태그로 두번째 메뉴 탭과 내용을 감싸고
화면에 보이지 않는 상태(none)로 해둡니다.

이후, 스크립트를 이용해서 현재 보여지는 First의 두번째 메뉴 탭에
onmouseover 이벤트가 발생했을 때(마우스를 가져갔을 때)
First를 사라지게 하고 Second를 나타나게 하는 것이고

Second에서는 첫번째 메뉴 탭에 onmouseover 이벤트가 발생했을 때
Second는 사라지게 First는 나타나게 하는 것입니다.