昨天在看NBA的时候无意中看到CCTV 5+体育太上的这个选项卡比较好看，便想模仿一个，看罢球赛于是就来做一个，要求是用原生js实现，还得兼容各浏览器，本以为没什么难度，半个小时差不多能搞定，结果却搞了三个小时。习惯了用jq，结果原生js都不知道怎么写了，看来以后还得多练练啊，否则越来越懒，越来越不会写原生js了。还有一个就是兼容IE6-8。
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style type="text/css">
*{padding: 0px ;margin: 0px;}
.cle:after{content: ""; font-size: 0px;display: block; clear: both; }
.cle{zoom:1}
body{margin: 0 auto; 960px;}
.select{height: 40px;margin-top: 20px;}
.select ul{list-style: none;border: 1px solid #cdcdcd;padding: 10px 10px 0px 10px;}
.select ul li{float:left;display:block;height: 30px;100px;font-size: 20px;line-height: 30px;text-align: center;cursor: pointer;}
.currentClass{border: 1px solid #cdcdcd;border-bottom:none;background: #fff;margin-bottom: -1px;position: relative;}
.show{min-height: 500px;_height:500px;padding-top:10px;border: 1px solid #cdcdcd;border-top: none;}
.show div{display: none;}
.show div.curr{display: block;}
</style>
</head>
<body>
<div class="select ">
<ul class="cle">
<li class="currentClass">CCTV1</li>
<li>CCTV2</li>
<li>CCTV3</li>
<li>CCTV4</li>
<li>CCTV5</li>
</ul>
</div>
<div class="show cle" id="showArea">
<div class="curr">this is tab1</div>
<div>this is tab2</div>
<div>this is tab3</div>
<div>this is tab4</div>
<div>this is tab5</div>
</div>
<script type="text/javascript">
function addEvent(element,type,handler){
if(element.addEventListener){
element.addEventListener
(type,handler,false)
}else if(element.attachEvent){
element.attachEvent ("on"+type,handler)
}else{
element["on"+type]=handler;
}
}
function doShow(event){
var event=event||window.event;
var target=event.target? event.target:event.srcElement;
if(!document.getElementsByClassName){
getElementsByClassName("currentClass")[0].className="";
} else{
document.getElementsByClassName("currentClass")[0].className="";
}
target.className="currentClass";
var index=target.index;
showArea(index);
}
function setIndex(parentNode){
var len=parentNode.childNodes;
for(var i=0;i<len.length;i++){
if(len[i].nodeType==1){
len[i].index=i;
}
}
}
function showArea(index){
if(!document.getElementsByClassName){
getElementsByClassName("curr")[0].className="";
}else{
document.getElementsByClassName("curr")[0].className="";
}
document.getElementById("showArea").childNodes[index].className="curr";
}
var liArray=document.getElementsByTagName("ul")[0].childNodes;
var len=liArray.length,i=0;
for(;i<len;i++){
if(liArray[i].nodeType==1){
addEvent(liArray[i],"mouseover",doShow);
console.log(i);
}
}
//IE不支持getElementByClassName 只好借用了司徒正美的选择器
var getElementsByClassName = function (searchClass, node,tag) {
if(document.getElementsByClassName){
return document.getElementsByClassName(searchClass);
}else{
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i = classes.length;
while(--i >= 0){
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
}
var j = elements.length;
while(--j >= 0){
current = elements[j];
match = false;
for(var k=0, kl=patterns.length; k<kl; k++){
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) returnElements.push(current);
}
return returnElements;
}
}
setIndex(document.getElementsByTagName("ul")[0]);
setIndex(document.getElementById("showArea"));
</script>
</body>
</html>
运行结果：
我想说动手写原生js吧，这样才会提高，用jq真心不会创造。