간단한 HTML 탭
1, HTML 바디의 코드
<body>
<div id="parta">
<ul id="tab">
<li id="li1" class="tabli"><a href="#"> </a></li>
<li id="li2" class="tabli"><a href="#"> </a></li>
<li id="li3" class="tabli"><a href="#"> </a></li>
<li id="li4" class="tabli"><a href="#"> </a></li>
<li id="li5" class="tabli"><a href="#"> </a></li>
<li id="li6" class="tabli"><a href="#"> </a></li>
<li id="li7" class="tabli"><a href="#"> </a></li>
</ul>
<ul id="node1" class="node">
<li> </li>
</ul>
<ul id="node2" class="node">
<li> </li>
</ul>
<ul id="node3" class="node">
<li> </li>
</ul>
<ul id="node4" class="node">
<li> </li>
</ul>
<ul id="node5" class="node">
<li> </li>
</ul>
<ul id="node6" class="node">
<li> </li>
</ul>
<ul id="node7" class="node">
<li> </li>
</ul>
</div>
</body>2, CSS 코드
body { width:960px; height:1000px; z-index:0;
margin:50px auto auto auto; position:relative;
border:1px solid #FF0000;}
*{margin:0; padding:0;}
ul,li{ list-style:none;}
#parta{ width:700px; height:300px; position:relative;
border:1px solid #9ccefd;
background-color:#deeefd;
margin:50px auto auto auto;}
#tab{ width:694px; height:25px; position:relative;
border:1px solid transparent;
background-color:transparent; }
.tabli{ display:block; font-family:Arial; font-size:12px;
width:80px; height:23px;
text-align:center; z-index:20;
background-color:#eff7fe; position:absolute;
border:1px solid #9ccefd; }
.node{ display:none; width:694px; height:252px; position:absolute; z-index:30;
left:3px;top:44px;background-color:#ffffff; border-top:1px solid #9ccefd; }
#node1{display:block;}
#li1{top:20px; line-height:24px;left:8px; }
/*border-bottom:transparent; background-color:#ffffff;*/
#li2{top:20px; line-height:24px;left:93px;}
#li3{top:20px; line-height:24px;left:177px;}
#li4{top:20px; line-height:24px;left:261px;}
#li5{top:20px; line-height:24px;left:345px;}
#li6{top:20px; line-height:24px;left:430px;}
#li7{top:20px; line-height:24px;left:515px;}3, js 코드
function movetab() {
var GetID1 = document.getElementById("li1");
GetID1.onmouseover = function () { gettab(1); };
var GetID2 = document.getElementById("li2");
GetID2.onmouseover = function () { gettab(2); };
var GetID3 = document.getElementById("li3");
GetID3.onmouseover = function () { gettab(3); };
var GetID4 = document.getElementById("li4");
GetID4.onmouseover = function () { gettab(4); };
var GetID5 = document.getElementById("li5");
GetID5.onmouseover = function () { gettab(5); };
var GetID6 = document.getElementById("li6");
GetID6.onmouseover = function () { gettab(6); };
var GetID7 = document.getElementById("li7");
GetID7.onmouseover = function () { gettab(7); };
}
function gettab(flag) {
for (var i = 1; i <=7; i++) {
var setcent = document.getElementById("node" + i);
var setTitle = document.getElementById("li" + i);
setTitle.style.zIndex = "20";
setTitle.style.border = "1px solid #9ccefd";
setTitle.style.backgroundColor = "#eff7fe";
setcent.style.display = "none";
if (i == flag) {
setTitle.style.zIndex = "40";
setTitle.style.borderBottom = "transparent";
setTitle.style.backgroundColor = "#ffffff";
setcent.style.display = "block";
}
}
}
function addLoadListener(fn) {
if (typeof window.addEventListener != 'underfind') {
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'underfind') {
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'underfind') {
window.attachEvent('onload', fn);
}
else {
var oldfn = window.onload;
if (typeof window.onload != 'funtion') {
window.onload = fn;
}
else {
window.onload = funtion()
{
oldfn();
fn();
};
}
}
}
addLoadListener(movetab);이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
