탭메뉴소스 문의 정보
탭메뉴소스 문의
본문
아래 소스를 이용하여 탭메뉴를 만들려고 합니다.
페이지 접속시 탭메뉴가 전혀 클릭안된채로 보여지는데요.
접속하자마자 바로 1번 탭메뉴가 클릭되어서 보여지게 하려면 어떻게해야 될까요?
<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">
<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>
페이지 접속시 탭메뉴가 전혀 클릭안된채로 보여지는데요.
접속하자마자 바로 1번 탭메뉴가 클릭되어서 보여지게 하려면 어떻게해야 될까요?
<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">
<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>
댓글 전체
버튼 모양이 4개나 대나요.
<td id="tab1" class="tab-button3" align="center">Tab 1</td>
이게 클릭된 상태 맞나 이렇게 하고
<div id="txttab1" style=";" align="center">
탭메뉴 내용 1
</div>
<td id="tab1" class="tab-button3" align="center">Tab 1</td>
이게 클릭된 상태 맞나 이렇게 하고
<div id="txttab1" style=";" align="center">
탭메뉴 내용 1
</div>
답변 감사드립니다.
<div id="txttab1" style=";" align="center">으로 수정하니,
페이지에서 탭1번이 바로 보여지나,
1번 이외의 탭을 먼저 누르면, 1번내용이 다른 번호의 탭에 따라옵니다.
ㅜㅜ
<div id="txttab1" style=";" align="center">으로 수정하니,
페이지에서 탭1번이 바로 보여지나,
1번 이외의 탭을 먼저 누르면, 1번내용이 다른 번호의 탭에 따라옵니다.
ㅜㅜ
