탭메뉴소스 문의

부엉빵

· 13년 전 · 조회 1538 1538 · 댓글 2 2

아래 소스를 이용하여 탭메뉴를 만들려고 합니다.
페이지 접속시 탭메뉴가 전혀 클릭안된채로 보여지는데요.
접속하자마자 바로 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>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

K찰스

프로필 보기 이 회원 글보기

13년 전

버튼 모양이 4개나 대나요.
<td id="tab1" class="tab-button3" align="center">Tab 1</td>

이게 클릭된 상태 맞나 이렇게 하고

<div id="txttab1" style=";" align="center">
탭메뉴 내용 1
</div>

부엉빵

프로필 보기 이 회원 글보기

13년 전

답변 감사드립니다.
<div id="txttab1" style=";" align="center">으로 수정하니,
페이지에서 탭1번이 바로 보여지나,
1번 이외의 탭을 먼저 누르면, 1번내용이 다른 번호의 탭에 따라옵니다.
ㅜㅜ

게시글 목록

번호	제목	글쓴이	조회	날짜
284172	그누보드 스킨적용후 글쓰기가 안되요 ㅠㅠ 1	lim이	3,616	11년 전
284170	최근게시물안 테이블안공백문제 2	연금술샤	2,668	11년 전
284167	소셜 로그인 연동과정 질문입니다.	아썸	4,859	11년 전
284164	특정 게시판에 글 작성시 자동 메일발송 2	hoonii	4,434	11년 전
284161	특정 주소만 디렉토리경로를 바꾸고 싶어요. 3	리리치요	2,248	11년 전
284159	안녕하세요 메뉴스킨관련 초보 질문좀 드릴게요ㅜㅡ 2	장미란	3,104	11년 전
284155	그누보드4 mysql이전문제 1	100볼트	3,096	11년 전
284152	분류가 있다면 표기 1	몬스터박스	2,111	11년 전
284151	설문그래프 100%에서 줄어들기 3	몬스터박스	2,657	11년 전
284148	모든데이터를 암호화 3	lsj9894	2,435	11년 전
284142	회원 정보 수정을 하려고 하면 패스워드가 다르다고 나옵니다. 3	테크노관리자	2,847	11년 전
284141	익스플러 10에서도 정상작동되는 좌우측 따라다니는 배너를 넣고싶은데요,, 2	네이처	2,874	11년 전
284137	체크박스에 체크된것만 db입력되기 1	커네드커네드	3,226	11년 전
284136	게시물 삭제에 관하여 물어 봅시다. 2	둘째삼식	2,641	11년 전
284135	게시판에 별명대신에 이름(아이디)로 출력하기 2	밀키스	3,309	11년 전
284127	방문자수 total 질문입니다. 2	narasarang	2,603	11년 전
284121	글쓰기 권한에 상관없이 글쓰기 버튼이 나오게 하려면요.. 3	AnnieK	3,366	11년 전
284120	회원가입시 휴대폰인증. 4	둘리뇽	3,232	11년 전
284116	회원가입(수정)시 등록 된 내용을 최신글에 보이게 하려면? 1	날으리	2,083	11년 전
284115	모든 게시판에서 내컴퓨터 이미지 첨부가 안되고 로딩이미지만 계속 나오고 있어요. 3	아미꼬	3,257	11년 전

이전 다음

3 4 5 6 7

전체 목록