불여우에서도 되는 메뉴 6

까만도둑

프로필 보기 이 회원 글보기

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

게시글 목록

번호	제목	글쓴이	조회	날짜
20014	웹접근성 접근성을 고려한, 컨텐츠를 가리는 방법 4	전진	2,064	12년 전
10421	jQuery jQuery Quick Api Reference 5	port	1,601	12년 전
10417	PHP PHP로 만든 RSS 2.0 리더 소스 3	랭귀지	3,400	12년 전
20006	CSS 그라디언트 에디터 7	port	2,087	12년 전
20003	HTML 파비콘(favicon) 만들어 넣기 2	port	2,772	12년 전
10410	기타 sns(트위터,미투데이,싸이월드,페이스북) 팝업 링크걸기 6	프로맘보	5,982	12년 전
10407	기타 크롬 내에서 IE,파폭,ios,안드로이드로 환경변경이 가능한거 아시나요?ㅋㅎ 2	프로맘보	1,615	12년 전
10392	PHP php 파싱! 간편하면서 강력한 - PHP Simple HTML DOM Parser 14	프로맘보	20,547	12년 전
10389	PHP 그누보드 설치후 login_check.php 파일이 다운로드 될때... 2	나의라임토마토	1,382	12년 전
10380	Mobile 디바이스별 viewport 설정. (수정본) 8	시누이	3,707	12년 전
10378	웹서버 3pod에 매니지드 구축하실수 있으신분~ 1	데브타워	777	12년 전
17596	통계 시니어창업 中 IT서비스업 분석자료입니다. 8	베스피아	2,412	12년 전
10371	PHP admin 으로 어떻게 로긴해야 할까요? 6	지러유	924	12년 전
19995	CSS css를 이용한 2차 메뉴입니다. 7	port	2,837	13년 전
10369	PHP 자동글 방지 문자입력 어떻케 설치하는건가요 1	이짠돌	1,021	13년 전
10366	jQuery 메뉴드롭슬라이드 쓰는데요.. 클릭해서 서브로 들어갔을때.. 메뉴가 그대로 있었으면 좋겠는데.. 2	한탕마녀	2,895	13년 전
10364	jQuery [펌] jQuery select box 1	관리자	4,788	13년 전
10363	기타 구글 확장프로그램 추천	프로맘보	983	13년 전
10361	정규표현식 캡쳐 그룹과 비캡쳐 그룹 1	관리자	2,194	13년 전
10357	웹서버 php 업로드 용량 늘리기 3	카카오툴즈	2,182	13년 전
10352	jQuery 상단에서 슬라이딩되는 스크립트인데 속도조절을 어떡해 해야하는지... 4	쏘오쿨	2,291	13년 전
19990	기타 고수님들 사이트오류(레이어팝업) 좀 봐주세요 ㅠ.ㅠ 4	황후인덕	5,154	13년 전
10349	PHP 아파치 웹서버 로그 파싱 access_log parser php 2	카카오툴즈	1,872	13년 전
10343	Mobile 디바이스별 viewport 설정. 5	시누이	5,580	13년 전
10340	JavaScript 팝업창 width="100%" 전체적으로 나올수있도록 하는 방법을 좀 도와주세요ㅠㅠ 2	진풍백	1,693	13년 전

이전 다음

45 46 47 48 49

전체 목록