1,HTML body 中的代码
<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);