js实现简单的导航栏
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
body {
font: 12px Arial, Helvetica, sans-serif, "新宋体";
}
#tb1 {
width: 401px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin: 50px auto 0px auto;
}
.menu {
height: 28px;
border-right: 1px solid #cccccc;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
list-style-type: none;
float: left;
width: 99px;
height: 28px;
line-height: 28px;
text-align: center;
border-left: 1px solid #cccccc;
cursor: pointer;
color: #666;
font-size: 14px;
overflow: hidden;
background: #e0e2eb;
}
.menu li.off {
background: #ffffff;
color: #336699;
font-weight: bold;
}
.menudiv {
height: 200px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-top: 0px;
background: #fefefe;
}
.menudiv div {
padding: 15px;
margin: 0px auto 0px auto;
height: 28px;
line-height: 28px;
}
function setli(name, cursel) {
cursel_0 = cursel;
for (var i = 1; i <=ulli_len; i++) {
var menu = document.getElementById(name + i);
var menudiv = document.getElementById("con_" + name + "_" + i);
if (i == cursel) {
menu.className ="off";
menudiv.style.display = "block";
}
else {
menu.className="";
menudiv.style.display = "none";
}
}
}
function next() {
cursel_0++;
if (cursel_0 > ulli_len) {
cursel_0 = 1;
}
setli(name_0,cursel_0);
}
var name_0 = 'one';
var cursel_0 = 1;
var ulli_len,iIntervalId;
onload = function () {
var ulli = document.getElementById("tb1").getElementsByTagName("li");
ulli_len = ulli.length;
for(var j=0;j ulli[j].onmouseover=function(){ clearInterval(iIntervalId); this.onmouseout=function(){ iIntervalId=setInterval(next,1000); } } } document.getElementById("con_"+name_0+"_"+ulli_len).parentNode.onmouseover=function(){ clearInterval(iIntervalId); this.onmouseout=function(){ iIntervalId=setInterval(next,1000); } } setli(name_0, cursel_0); iIntervalId=setInterval(next, 1000); }