불여우에서도 되는 메뉴 6

개발자 기타

까만도둑

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 20년 전 · 조회 3737 3737 · 댓글 4 4

Sample Script

첫번째 탭 메뉴의 내용에 들어갈 구문을 입력 하세요

두번째 탭 메뉴의 내용에 들어갈 구문을 입력 하세요

세번째 탭 메뉴의 내용에 들어갈 구문을 입력 하세요

네번째 탭 메뉴의 내용에 들어갈 구문을 입력 하세요

<html>
<head>
<title>Sample Script </title>

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a.current{
background: lightyellow;
}

/**내용이 보여질 박스 설정**/
#tabcontentcontainer{
width: 400px;
padding: 20px;
border: 1px solid black;
}

.tabcontent{
display:none;
}

</style>

var initialtab=[1, "sc1"] // 처음 시작될 탭의 ID

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i 
break
}
}
}

function do_onload(){
var cookiecheck=window.get_cookie && get_cookie(window.location.pathname).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(window.location.pathname).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

</script>

var enablepersistence=true // 현재페이지 유지시에는 true, 아니면 false

function savetabstate(){
document.cookie=window.location.pathname+"="+tabsourceindex+"|"+previoustab
}

window.onunload=savetabstate

</script>

</head>

<body>

<ul id="tablist">
<li><a href="#" class="current" onClick="return expandcontent('sc1', this)">첫번째메뉴</a></li>
<li><a href="#" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">두번째메뉴</a></li>
<li><a href="#" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">세번째메뉴</a></li>
<li><a href="#" onClick="return expandcontent('sc4', this)" theme="#DFFFDF">네번째메뉴</a></li>
</ul>

</DIV>
</body>
</html>

[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]

댓글 작성

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

로그인하기

댓글 4개

몰라

프로필 보기 이 회원 글보기 이 회원의 댓글보기

20년 전

와 감사드립니다. 이거 찐짜 많이 사용하는 거잖아요...^^

고냉이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

20년 전

이거 괜찮네요.

혜심

프로필 보기 이 회원 글보기 이 회원의 댓글보기

20년 전

훌륭합니다.감사합니다.

아드리안

프로필 보기 이 회원 글보기 이 회원의 댓글보기

18년 전

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	제목	글쓴이	날짜	조회
52	GetImageSize() [2] #개발자 #javascript	예진맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	2666
51	리눅스 서버의 시간이 맞지 않을때? #개발자 #javascript	prosper 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	2307
50	man 페이지 txt파일로 저장하기 #퍼블리셔 #html	prosper 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	2129
49	키보드의 방향키로 윈도우의 위치를 이동시킵니다 #개발자 #기타	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	2138
48	이동식 메뉴 박스 #개발자 #기타	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	2288
47	오늘은 어딜 가볼까? 콤보상자 회전후 이동하기 #개발자 #기타	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	1906
46	마우스 대신 키보드를 눌러 원하는 곳으로 이동합니다 #개발자 #기타	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	1911
45	체크박스를 클릭하면 이동하는 체크박스 메뉴 스크립트 #개발자 #javascript	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	2099
44	select 으로 이동하기 사이트 이동 소스 #개발자 #기타	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	20년 전	2340
43	책장을 넘기는 것같은 이미지 슬라이드 쇼 스크립트 [7] #개발자 #기타	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	4556
42	특정 디렉토리 또는 파일 갯수 세기 #개발자 #기타	prosper 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	2690
41	디렉토리 내에서 파일만 퍼미션 변경 #개발자 #javascript	prosper 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	2093
40	마우스를 대면 링크 이미지들을 미리 보여줍니다 [1] #개발자 #기타	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	2152
39	이미지를 5단계로 키워서 보자 [2] #퍼블리셔 #html	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	2107
38	DirectX의 와이프 기능을 사용한 이미지 스와핑 효과 #개발자 #javascript	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	2382
37	풀다운 콤보메뉴로 이미지들을 보여줍니다 [1] #개발자 #기타	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	2526
36	특정 이미지를 지정한 날까지만 보여줍니다 [1] #개발자 #javascript	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	1734
35	부드럽게 오버랩되는 이미지 슬라이드 쇼 [1] #개발자 #기타	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	4044
34	끊김없이 연속적으로 스크롤 되는 이미지 스크롤러 스크립트 #개발자 #기타	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	3822
33	iframe 써서 노 프레임 효과 내기 [1] #개발자 #javascript	카이루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	2944
32	설치Apache 1.3.29 + PHP 4.3.4 + MySQL + GD + IMAP 등등 설치 #개발자 #mysql	prosper 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	2858
31	[펌] mysql 인덱싱. #개발자 #mysql	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	5228
30	Apache 1.3.x, php, mysql 3.x 연동(php정적모듈 설치) 웹서버 구축하기(첫번째 mysql 설치) #개발자 #mysql	아우겐나이스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	4007
29	리눅스 압축관련 명령어 #퍼블리셔 #html	아우겐나이스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	4407
28	퍼미션관련 명령어 #개발자 #javascript	아우겐나이스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	21년 전	3421

• 21년 전

퍼미션관련 명령어

#개발자 #javascript

아우겐나이스

프로필 보기 이 회원 글보기 이 회원의 댓글보기

• 21년 전