一个模仿CCTV 5+体育台上的选项卡

昨天在看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;width: 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;width: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真心不会创造。

posted @ 2012-11-05 16:16  黑暗骑士之“闪”  阅读(431)  评论(0)    收藏  举报