탭 메뉴 구성, 테이블 누른 효과
페이지 정보
작성자 서방님 댓글 0건 조회 139회 작성일 07-08-11 15:15본문
<HTML>
<HEAD>
<TITLE>BLUE-B</TITLE>
<STYLE>
.tab-table { background: buttonface; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; }
.tab-button { width: 100; height: 20; background: buttonface; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; cursor: hand; }
.tab-button2 { width: 100; height: 20; background: buttonface; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; cursor: hand; color: blue; }
.tab-button3 { width: 100; height: 20; background: buttonface; border-top: 1px solid buttonshadow; border-left: 1px solid buttonshadow; border-bottom: 1px solid buttonhighlight; border-right: 1px solid buttonhighlight; cursor: hand; color: blue; }
.tab-button4 { width: 100; height: 20; background: buttonface; border-top: 1px solid buttonshadow; border-left: 1px solid buttonshadow; border-bottom: 1px solid buttonhighlight; border-right: 1px solid buttonhighlight; cursor: hand; }
.tab-body { background: buttonface; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
document.onmouseover = TabOver;
document.onmouseout = TabOut;
document.onmousedown = TabDown;
document.onmouseup = TabUp;
var eOld = null;
function TabOver() {
var eSrc = window.event.srcElement;
if (eSrc.className == "tab-button") {
eSrc.className = "tab-button2";
}
if (eSrc.className == "tab-button4") {
eSrc.className = "tab-button3";
}
}
function TabOut() {
var eSrc = window.event.srcElement;
if (eSrc.className == "tab-button2") {
eSrc.className = "tab-button";
}
if (eSrc.className == "tab-button3") {
eSrc.className = "tab-button4";
}
}
function TabDown() {
var eSrc = window.event.srcElement;
if (eSrc.className == "tab-button2") {
eSrc.className = "tab-button3";
}
}
function TabUp() {
var eSrc = window.event.srcElement;
if (eSrc.className == "tab-button3") {
var eTxt = eval("txt" + eSrc.id)
eSrc.className = "tab-button3";
if (eOld != null) {
eOld.className = "tab-button";
var eTxt2 = eval("txt" + eOld.id)
eTxt2.style.display = "none";
}
eOld = eSrc;
eTxt.style.display = "";
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1" WIDTH="500" HEIGHT="200" class="tab-table">
<tr>
<td id="tab1" class="tab-button" align="center">Tab 1</td>
<td id="tab2" class="tab-button" align="center">Tab 2</td>
<td id="tab3" class="tab-button" align="center">Tab 3</td>
<td id="tab4" class="tab-button" align="center">Tab 4</td>
<td id="tab5" class="tab-button" align="center">Tab 5</td>
</tr>
<tr>
<td colspan="5" class="tab-body">
<div id="txttab1" style="display: none;" align="center">
탭메뉴 내용 1
</div>
<div id="txttab2" style="display: none;" align="center">
탭메뉴 내용 2
</div>
<div id="txttab3" style="display: none;" align="center">
탭메뉴 내용 3
</div>
<div id="txttab4" style="display: none;" align="center">
탭메뉴 내용 4
</div>
<div id="txttab5" style="display: none;" align="center">
탭메뉴 내용 5
</div>
</td>
</tr>
</table>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
