<!DOCTYPE html>
<html lang=
"en">
<head>
<meta charset=
"UTF-8">
<title>jstab标签</title>
<style type=
"text/css">
*{margin:
0;padding:
0;list-style: none;text-
decoration: none;}
.main{width: 298px;height: 98px;border: 1px solid #000;margin: 30px auto
0;overflow: hidden;}
.tit{width: 298px;overflow: hidden;background-
color: #ccc}
.tit ul li{float: left;width:
20%;height: 28px;text-align: center;line-
height: 28px}
.tit ul li.select{background-
color: #fff}
.tit ul{overflow: hidden;}
.con{overflow: hidden;}
.con ul li{width: 298px;height: 70px;overflow: hidden;display: none;}
</style>
</head>
<body>
<div
class=
"main" id=
"main">
<div id=
"tit" class=
"tit">
<ul>
<li
class=
"select">首页</li>
<li>开始</li>
<li>菜单</li>
<li>选项</li>
<li>备注</li>
</ul>
</div>
<div id=
"con" class=
"con">
<ul>
<li style=
"display: block;">内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
</div>
</div>
<script type=
"text/javascript">
function $(id){
return typeof id ===
'string'?
document.getElementById(id):id;
};
window.onload =
function(){
// 获取鼠标滑过或点击的标签要和切换内容的元素
var title = $(
'tit').getElementsByTagName(
'li');
var lis = $(
'con').getElementsByTagName(
'li');
if (title.length!=
lis.length)
return;
for(
var i =
0;i<title.length;i++
){
// 遍历tit下的所有li
title[i].top=
i;
title[i].onmouseover=
function(){
for (
var j =
0;j<title.length;j++
) {
// 遍历con下的所有li
title[j].className=
''
lis[j].style.display=
'none';
};
this.className=
"select";
lis[this.top].style.display=
'block';
}
}
}
</script>
</body>
</html>
转载于:https://www.cnblogs.com/7-Eleven/p/5519218.html
相关资源：HTML实现Tab选项卡（自动 手动）
