불여우에서도 되는 메뉴 6

까만도둑

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

· 20년 전 · 조회 3732 3732 · 댓글 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년 전

게시글 목록

번호	제목	글쓴이	조회	날짜
1164	기타 역재생(rewind)하기	디자이언	2,752	19년 전
1163	기타 rpm --import /usr/share/rhn/RPM-GPG-KEY-fedora	관리자	2,444	19년 전
17868	HTML 자바스크립트 오류 메시지 감추기	태엽푸는새	2,516	19년 전
1162	JavaScript RTL8201BL 랜카드 잡으려면	관리자	3,776	19년 전
1161	MySQL mysql 설치후 실행오류 처리	관리자	3,245	19년 전
1160	기타 /etc/sysconfig/i18n 한글 설정	관리자	4,968	19년 전
17867	HTML 붙여넣기 + 오른쪽 마우스 클릭 금지(익스만)	세은아빠2	2,383	19년 전
1159	JavaScript RedHat(레드햇) 9 설치 후 yum 설치	관리자	4,479	19년 전
1158	MySQL RedHat(레드햇) 7.3 에서 APM 빠른 설치	관리자	3,075	19년 전
17866	HTML 삼바 설정 간단 쉬운 쉽게	관리자	2,846	19년 전
1157	기타 페도라에서 한글 man page 깨지는 현상 해결	관리자	3,699	19년 전
1156	JavaScript 메일 릴레이 테스트	관리자	2,615	19년 전
1155	MySQL [펌] 리눅스 샌드메일,imap 설치,설정하기	관리자	3,697	19년 전
1154	기타 [펌] Sendmail SMTP 인증 설정 관련(SMTP Auth)	관리자	3,967	19년 전
1153	PHP [펌] REDHAT Linux 7.3 이상 sendmail 8.11.6 이상 CONNECTION REFUSED 문제	관리자	3,366	19년 전
1152	기타 [자바스크립트][펌]자동으로 새로고침이 필요한 페이지에 삽입 - 찾으려면 보이지 않는 팁	나스카	3,447	19년 전
1142	PHP 프레임(frame) 새로고침할 때 페이지 유지하기 9	유아원	4,040	19년 전
1137	JavaScript 브러시 집안들 브러시 지름을 쉽고 빠르게 조절하자~~~ 4	hwatta	2,322	19년 전
1136	정규표현식 페도라 코어 3에서 APM 설치하기	관리자	5,066	19년 전
1135	Linux rsync를 이용한 미러링	관리자	3,614	19년 전
1133	기타 du -h --max-depth=1 1	관리자	2,565	19년 전
1130	기타 트래지션 + 마우스오버 2	sdesign1s	2,244	19년 전
1128	기타 vi 서비스 편집 1	현복짱	2,705	20년 전
1127	MySQL 리눅스에서 mysql DB설정	현복짱	2,992	20년 전
1126	MySQL 리눅스 에서 아파치와 php 설치	현복짱	2,764	20년 전

이전 다음

전체 목록