js选项卡简单代码实例
分类：实例代码
分享一段代码实例，它利用原生js实现了简单的选项卡切换功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul li {
list-style-type: none;
}
a {
text-decoration: none;
color: #fff;
}
#box {
margin:50px;
overflow:hidden;
}
#nav li {
padding-left: 8px;
padding-top: 3px;
width: 90px;
height: 25px;
margin: 0;
border: 1px solid #999;
border-bottom: 0;
float: left;
background: #ccc;
}
#antzone div {
width: 395px;
height: 150px;
background: #694bb7;
border: 1px solid #999;
border-top: 0;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
var anniu1 = document.getElementById('nav').getElementsByTagName('li');
var neirong = document.getElementById('antzone').getElementsByTagName('div');
for (var index = 0; index < anniu1.length; index++) {
anniu1[index].index = index;
anniu1[index].onclick = function () {
for (var index = 0; index < anniu1.length; index++) {
anniu1[index].style.background = '#ccc';
neirong[index].style.display = 'none';
}
this.style.background = '#694bb7';
neirong[this.index].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id="box">
<div id="nav">
<ul>
<li style="background:#694bb7;"><a href="javascript:;">前端教程网一</a></li>
<li style="border-left:0;"><a href="javascript:;">前端教程网二</a></li>
<li style="border-left:0;"><a href="javascript:;">前端教程网三</a></li>
<li style="border-left:0;"><a href="javascript:;">前端教程网四</a></li>
</ul>
</div>
<div id="antzone">
<div style="display:block;">js教程</div>
<div>div教程</div>
<div>css教程</div>
<div><a href="http://www.pipipi.net" target="_blank">www.pipipi.net</a></div>
</div>
</div>
</body>
</html>
js选项卡简单代码实例，这样的场景在实际项目中还是用的比较多的，关于js选项卡简单代码实例就介绍到这了。
js选项卡简单代码实例属于前端实例代码，有关更多实例代码大家可以查看。