<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title></title>
<style>
* {
margin:0;
padding:0;
list-style:none;
font-family: "微软雅黑", "张海山锐线体简"
}
.sub_card { width:100%}
.sub_card ul{ width:100%;float: left;}
.sub_card li {
background:#ccc; float:left; width:110px;
}
.sub_card li.active {
background:red;
}
.none{
display:none;
}
.current {
display:block;
}
</style>
<script>
window.onload=function(){
sub_card('sub_card');
};
//解决ie8下面不兼容getElementsByClassName的方法
if (!document.getElementsByClassName) {
document.getElementsByClassName = function (className, element) {
var children = (element || document).getElementsByTagName('*');
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
};
}
function sub_card(sClass){
var asub_card=document.getElementsByClassName(sClass);//抓一堆卡
//console.log(asub_card);
for(var i=0;i<asub_card.length;i++){
//asub_card[i] //每一个选项卡
initsub_card(asub_card[i]);//给每一个选项卡加功能
}
}
function initsub_card(osub_card){ //给单个选项卡加功能
var aIpt=osub_card.getElementsByTagName('li');
var aDiv=osub_card.getElementsByTagName('div');
for(var i=0;i<aIpt.length;i++){
aIpt[i].index=i;
aIpt[i].onclick=function(){
for(var i=0;i<aIpt.length;i++){
aIpt[i].className='';
aDiv[i].className='none';
}
this.className='active';
aDiv[this.index].className='current';
};
}
};
</script>
</head>
<body>
<div class="sub_card">
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<div class="current">aaa</div>
<div class="none">bbbb</div>
<div class="none">ccc</div>
</div>
<div class="sub_card">
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<div class="current">aaa</div>
<div class="none">bbbb</div>
<div class="none">ccc</div>
</div>
</body>
</html>
