<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style>
ul{margin: 0;padding:0;}
#wrap{width: 600px;margin: auto;box-shadow: 10px 10px 5px #ccc;-webkit-box-shadow: 10px 10px 5px #ccc;}
.custom-nav{width: 100%;height: 40px;background: #393D49;}
.custom-nav li{float: left;list-style: none;}
.custom-nav li a{display: block;color: #01AAED;font: 14px/20px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;margin: 0 10px;padding: 10px 0 5px;border-bottom: 5px solid rgba(0, 0, 0, 0);text-decoration: none;}
.custom-nav li a:hover{color: #ffffff;border-color: #009688;transition: .5s;-webkit-transition: .2s;}
.custom-nav li a.active{color: #ffffff;border-color: #009688;background-color: #2F4056;}
.custom-body{padding:10px;background-color: #f2f2f2;border: 1px solid #ccc;}
.custom-body div{width: 100%;height: 100%;display: none;}
.custom-body div.active{display: block;}
</style>
</head>
<body>
<div id="wrap">
<ul class="custom-nav">
<li><a href="javascript:;" class="active">选项一</a></li>
<li><a href="javascript:;">选项二</a></li>
<li><a href="javascript:;">选项三</a></li>
<li><a href="javascript:;">选项四</a></li>
<li><a href="javascript:;">选项五</a></li>
<li><a href="javascript:;">选项六</a></li>
<li><a href="javascript:;">选项七</a></li>
<li><a href="javascript:;">选项八</a></li>
</ul>
<div class="custom-body">
<div class="active" style="background: #5BA2F0">0</div>
<div style="background: #28F0DB">1</div>
<div style="background: #1AF056">2</div>
<div style="background: #4880BD">3</div>
<div style="background: #BD7299">4</div>
<div style="background: #5FBD0F">5</div>
<div style="background: #1DBD19">6</div>
<div style="background: #BD0FBD">7</div>
</div>
</div>
<script>
window.onload=function()
{
function Tab()
{
this.custom_nav=document.getElementsByClassName("custom-nav").item(0),
this.custom_a=this.custom_nav.getElementsByTagName("a"),
this.custom_body=document.getElementsByClassName("custom-body").item(0),
this.custom_div=this.custom_body.getElementsByTagName("div");
this.init();
}
Tab.prototype.init=function()
{
for(var i=0;i<this.custom_a.length;i++)
{
var _this=this;
this.custom_a[i].index=i;
this.custom_a[i].addEventListener("click", function(){
_this.a_click_fn(this);
});
}
}
Tab.prototype.a_click_fn=function(_this)
{
for(var i=0;i<this.custom_a.length;i++)
{
this.custom_a[i].className=this.custom_div[i].className="";
}
_this.className=this.custom_div[_this.index].className="active";
}
var Tab=new Tab();
};
</script>
</body>
</html>