浅谈JavaScript选项卡

来源：互联网发布：dnf剑宗短剑精通数据编辑：程序博客网时间：2024/06/04 18:49

选项卡的制作

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="选项卡，选项卡的关键字">
<meta name="description" content="选项卡的描述">
<link target="_blank">
<title>选项卡的练习</title>
<style>
*{margin: 0; padding:0;}
#box{width: 300px; height: 300px; margin:0 auto;}
#top li{display: block;width: 100px; height: 100px; float: left; background-color: #999; line-height: 100px; text-align: center;}
#content div{width: 300px; height: 300px;background-color: #f5f5f5;border: 1px solid #f5f5f5;}
.hidden{display: none;}
.highlight{text-decoration:underline; color:#f80;}
</style>
<script type="text/javascript">
var liArr,divArr;
var index=0;
window.onload=function(){
liArr=document.getElementById("top").getElementsByTagName("li");
divArr=document.getElementById("content").getElementsByTagName("div");
hiddenDiv();
divArr[0].className="";
for(var i=0;i<liArr.length;i++){
liArr[i].onmouseover=function(){
hiddenDiv();
index=getIndex(this,liArr);
liArr[index].className="highlight";
divArr[index].className="";
}
}

}

//隐藏所有div

function hiddenDiv(){
for(var i=0;i<liArr.length;i++){
liArr[i].className="";
divArr[i].className="hidden";
}

}

//获取索引

function getIndex(obj,arr){
for(var i=0;i<arr.length;i++){
if(obj==arr[i])
return i;
}
return -1;
}
</script>
</head>
<body>
<div id="box">
<div id="top">
<ul>
<li>国内新闻</li>
<li>国外新闻</li>
<li>热点新闻</li>
</ul>
</div>
<div id="content">
<div>我是国内新闻/div>
<div>我是国外新闻</div>
<div>我是热点新闻</div>
</div>
</div>
</body>

</html>

注意;索引的获取，本人在之前做的时候就是没有注意到这点。

现在拿出来给大家分享一下！希望对大家有点帮助。

1 0