탭메뉴소스 문의

부엉빵

· 13년 전 · 조회 1539 1539 · 댓글 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번내용이 다른 번호의 탭에 따라옵니다.
ㅜㅜ

게시글 목록

번호	제목	글쓴이	조회	날짜
284044	글 쓰기 JavaScript 변수 사용 오류 2	낭만혈질	2,819	11년 전
284041	네오애드 api 어떻게 적용하나요?ㅠㅠ 2	스카이라인	3,591	11년 전
284040	의뢰하기 양식에 로그인상태에서 체크박스체크하면 회원정보가 2	열라뽕똬이	2,064	11년 전
284034	div ul li:hover 적용할려면 어떤 설정이 필요한가요?? 2	겸손1935	4,981	11년 전
284033	누가 검색했는지 알려주는건데요. 1	hyeyun	3,162	11년 전
284029	글쓰기 최소글자, 최대 글자 설정시, 1	홈짱	2,076	11년 전
284024	쪽지창을 전체화면으로 열려면 4	춤세상	2,811	11년 전
284015	최근게시물출력 적용방법 6	연금술샤	3,894	11년 전
284011	짜집기한건데 스크립트오류가 심해요 ㅠㅠ 7	쌍란	2,583	11년 전
284010	게시판 글쓰기 스팸방지글 안나오는 거 해결방법 좀 3	스카이바디	3,184	11년 전
284009	이런메뉴는 뭔가요 ..? 1	myfree	2,283	11년 전
283998	통합게시판 6	히어1	3,187	11년 전
283992	질문입니다... 여러테이블에 동시에 필드를 추가 하는 방법 4	재아	2,531	11년 전
283989	완전 초보라서 ㅜㅜ 1	붉은피쉬	1,942	11년 전
283984	게시판 공지사항 작성시 공지사항 게시글 중복출력 2	해피마인드	3,692	11년 전
283983	리스트 창에서 검색 버튼을 누르면 어떤 파일에 무엇이 실행이 되나요? 2	겸손1935	2,161	11년 전
283981	설문조사 크롬 오류 2	slow	3,072	11년 전
283976	서버에 신주소 1기가되는 db를 다른곳에 셋팅해두고 각각 사이트마다 신주소 호스팅걸 불러와야하는데요 3	앱보드	3,056	11년 전
283974	네이버 파워링크 이거 달려고 하는데 어떻게 해야 하나요? 1	스카이라인	4,557	11년 전
283966	포인트별 회원등급 및 레벨아이콘 변동 설정요.. 3	아썸	5,150	11년 전

이전 다음

5 6 7 8 9

전체 목록