1.Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav li{
list-style: none;
float: left;
width: 40px;
text-align: center;
}
.clearFix:after{
content: "";
display: block;
clear: both;
}
.tabs{
width: 200px;
height: 100px;
}
.tabs ul{
}
.tabs>div{
}
.nav .actived{
background: red;
}
.tabs>div{
display: none;
}
.tabs .actived{
display: block;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="nav clearFix">
<li class="actived">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<div class="actived">aaaa</div>
<div>bbbb</div>
<div>cccc</div>
<div>dddd</div>
<div>eeee</div>
</div>
<div class="news tabs">
<ul class="nav clearFix">
<li class="actived">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<div class="actived">aaaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<div>eeee</div>
</div>
<div class="pics tabs">
<ul class="nav clearFix">
<li class="actived">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<div class="actived">aaaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<div>eeee</div>
</div>
<div class="autotabs tabs">
<ul class="nav clearFix">
<li class="actived">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<div class="actived">aaaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<div>eeee</div>
</div>
<script src="js/utilWY.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ownerTabs.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function () {
new Tabs(".tabs");
new Tabs(".news");
new Tabs(".pics");
new AutoTabs(".autotabs");
}
</script>
</body>
</html>
2.js代码部分
function Tabs (tabs) {
//找到选项卡
this.tabs = document.querySelector(tabs||".autotabs");
//找到当前选项卡里的所有的li
this.aLi = WY.nodeListToArr(this.tabs.querySelectorAll(".nav li"));
//找到所有的DIV,通过数组的filter方法获取满足条件的
var children=WY.nodeListToArr(this.tabs.children);
this.aDiv = children.filter(function (item) {
//将所有满足节点是DIV的item返回
return item.nodeName=="DIV";
});
console.log(this.aDiv);
//给每个li绑定onmouseover事件
for(var i = 0,len = this.aLi.length;i<len;i++){
//因为这里调用了change方法，this指向由指向函数变成指向this.aLi,所以用bind将它绑定
this.aLi[i].onmouseover = this.change.bind(this);
}
}
//
Tabs.prototype.change=function (event) {
var currLi=event.target;
if(!currLi.classList.contains(".actived")){
var aActived=this.tabs.querySelectorAll(".actived");
aActived[0].removeAttribute("class");
aActived[1].removeAttribute("class");
}
currLi.setAttribute("class","actived");
this.aDiv[this.aLi.indexOf(currLi)].setAttribute("class","actived");
}
function AutoTabs (tabs) {
Tabs.call(this,tabs);//继承父类的属性
this.iNow=0;
for(var i=0,len=this.aLi.length;i<len;i++){
this.aLi[i].addEventListener("mouseover",this.change2.bind(this),false);
}
for(var i=0,len=this.aLi.length;i<len;i++){
this.aLi[i].addEventListener("mouseout",this.autoPlay.bind(this),false);
}
this.autoPlay();
}
AutoTabs.prototype=new Tabs();
AutoTabs.prototype.autoPlay=function () {
clearInterval(this.timer);
this.timer=setInterval(this.play.bind(this),1000);
}
AutoTabs.prototype.play=function () {
this.aLi[this.iNow].removeAttribute("class");
this.aDiv[this.iNow].removeAttribute("class");
this.iNow++;
if(this.iNow>this.aLi.length-1){
this.iNow=0;
}
this.aLi[this.iNow].setAttribute("class","actived");
this.aDiv[this.iNow].setAttribute("class","actived");
}
AutoTabs.prototype.change2=function () {
clearInterval(this.timer);
var target=event.target;
this.iNow=this.aLi.indexOf(target);
}