选项卡功能

<style>
    *{
      margin:0;
      padding: 0;
  }
  ul,ol{
      list-style: none;
  }
 /*整个容器盒子大小 相对定位*/
 .side-box{
     width: 230px;
     position: relative;
     margin: 0 auto;
 }
 /*头部*/
  .side-box-hd{
      position: relative;
      height: 18px;
      margin-bottom: 10px;
      padding: 11px 0;
  }
  /*头部标题*/
  .side-box-tit{
      padding-left: 10px;
      border-left: 3px solid #389f0c;
      font: 18px/1 '\5fae\8f6f\96c5\9ed1';
      color: #389f0c;
  }
  /*选项卡盒子 绝对定位到头部区域去*/
  .tabs{
      position: absolute;
      right: 0;
      top: 9px;
      height: 22px;
  }
  /*选项卡里面的内容*/
  .tabitem{
      float: left;
      height: 22px;
      padding: 0 8px;
      line-height: 22px;
      text-align: center;
      color: #389f0c;
      font-weight: bold;
  }
  /*成绩分数*/
  .grade{
      position: absolute;
      top: 5px;
      right: 0;
      height: 16px;
      padding-left: 20px;
      line-height: 16px;
      color: #ff6d00;
      background: url(http://p7.qhimg.com/t017bb00fb17c182fe8.png) 0 0 no-repeat;
  }
  .mod-olist li {
      overflow: hidden;
      border-bottom: 1px dotted #eaeaea;
      width: 230px;
      height: 26px;
      margin: 0;
      padding: 0;
      line-height: 26px;
  }
      /*数字标示*/
  .mod-olist .index {
      position: absolute;
      left: 0;
      top: 6px;
      width: 17px;
      height: 14px;
      text-align: center;
      line-height: 14px;
      color: #fff;
      background: #aaa;
  }
  /*第一个盒子里面显示的其他内容-----------*/
  .mod-olist .img_show .index{
      top:0
  }
      /*前三的颜色*/
  .mod-olist .top-three .index{
      background: #3eaf0e;
  }
  .mod-olist .img_show{
      position: relative;
      width: 153px;
      height: 85px;
      height: auto;
      padding-left: 27px;
      padding-right: 50px;
      border-bottom: 0;
  }
      /*图片容器*/
  .mod-olist .img_txt_box .pic {
      float: left;
      width: 60px;
      height: 80px;
      margin: 0 10px 0 0;
  }
  .img_txt_box .pic a {
      position: relative;
      display: block;
      overflow: hidden;
      width: 100%;
      height: 100%;
  }
  .img_txt_box .pic a img{
      width: 60px;
      height: 80px;
      border: none;
      outline: none;
  }
  .mod-olist .img_txt_box .cont {
      overflow: hidden;
      padding-top: 4px;
      text-align: left;
      line-height: 2;
      color: #888;
  }
  .mod-olist .img_txt_box .cont h4 {
      font-size: 12px;
      overflow: hidden;
      height: 21px;
      font-weight: 400;
  }
  .img_txt_box .cont p {
      overflow: hidden;
      height: 18px;
      font-size: 12px;
  }
  /*-----------------------------*/
 
  .mod-olist .red{
      background-position: 0 -40px;
  }
  .mod-olist .yellow{
      background-position: 0 -20px;
  }
  .mod-olist .green {
      background-position: 0 0;
  }
  /*电影电视名字内容*/
  .mod-olist .name {
      position: relative;
      zoom: 1;
      z-index: 1;
      display: block;
      overflow: hidden;
      height: 26px;
      line-height: 26px;
      padding-left: 27px;
      padding-right: 50px;
  }
  .mod-olist .name:hover {
      background: #f7f7f7;
  }
  .mod-olist a:link {
      color: #444;
  }
  .mod-olist a:hover {
      color: #389f0c;
  }
  .side-box-bd a{
      text-decoration: none;
  }
  .clearfix:after{
      display:block;
      clear:both;
      content:".";
      visibility:hidden;
      height:0
  }
  .clearfix{zoom:1}
  .active{
      background-color: #389f0c;
      color: #ffffff;
      border-radius: 5px;
      box-shadow:0 0 10px rgba(51, 197, 105, 0.60);
  }
</style>
<div class="side-box">
    <div class="side-box-hd">
        <h3 class="side-box-tit">特色榜</h3>
    </div>
    <div class="side-box-bd">
        <div class="tabs" id="tabs_nav">
            <a href="javascript:void(0)" class="tabitem active">
                <i>大陆</i>
            </a>
            <a href="javascript:void(0)" class="tabitem">
                <i>港台</i>
            </a>
            <a href="javascript:void(0)" class="tabitem">
                <i>海外</i>
            </a>
        </div>
        <div class="le-views" id="tabs_content">
            <div class="viewitem" id="viewitem_0" style="display:block;">
                <ol class="mod-olist clearfix">
                    <li class="top-three img_show clearfix">
                        <span class="index">1</span>
                        <div class="img_txt_box">
                            <div class="pic">
                                <a href="" title="特殊身份111" target="_blank">
                                    <img src="http://p1.qhimg.com/t01c5d6faecb9a2ef03.jpg" alt="特殊身份111">
                                </a>
                            </div>
                            <div class="cont">
                                <h4 class="title">
                                    <a href="" class="title" title="特殊身份1" target="_blank">特殊身份1</a>
                                </h4>
                                <p>宇宙最能打1</p>
                                <p>主演：甄子丹</p>
                            </div>
                        </div>
                       <span class="grade green">5.8分</span>
                    </li>
                    <li class="top-three  clearfix">
                        <a href="" title="不二神探" class="name">
                            <span class="index">2</span>
                            不二神探1
                            <span class="grade yellow">5.2分</span>
                        </a>
                    </li>
                    <li class="top-three clearfix">
                        <a href="" title="" class="name">
                            <span class="index">3</span>
                            非常幸运1
                            <span class="grade red">4.5分</span>
                        </a>
                    </li>
                    <li class="clearfix">
                        <a href="" title="" class="name">
                            <span class="index">4</span>
                            非常完美1
                            <span class="grade red">4.3分</span>
                        </a>
                    </li>
                    <li class="clearfix">
                        <a href="" title="" class="name">
                            <span class="index">5</span>
                             哈利波特1
                            <span class="grade green">4.7分</span>
                        </a>
                    </li>
                </ol>
            </div>
            <div class="viewitem" id="viewitem_1" style="display:none;">
                <ol class="mod-olist clearfix">
                    <li class="top-three img_show clearfix">
                        <span class="index">1</span>
                        <div class="img_txt_box">
                            <div class="pic">
                                <a href="" title="特殊身份222" target="_blank">
                                    <img src="http://p1.qhimg.com/t01c5d6faecb9a2ef03.jpg" alt="特殊身份222">
                                </a>
                            </div>
                            <div class="cont">
                                <h4 class="title">
                                    <a href="" class="title" title="特殊身份2" target="_blank">特殊身份2</a>
                                </h4>
                                <p>宇宙最能打2</p>
                                <p>主演：甄子丹</p>
                            </div>
                        </div>
                       <span class="grade green">5.8分</span>
                    </li>
                    <li class="top-three  clearfix">
                        <a href="" title="不二神探" class="name">
                            <span class="index">2</span>
                            不二神探2
                            <span class="grade yellow">5.2分</span>
                        </a>
                    </li>
                    <li class="top-three clearfix">
                        <a href="" title="" class="name">
                            <span class="index">3</span>
                            非常幸运2
                            <span class="grade red">4.5分</span>
                        </a>
                    </li>
                    <li class="clearfix">
                        <a href="" title="" class="name">
                            <span class="index">4</span>
                            非常完美2
                            <span class="grade red">4.3分</span>
                        </a>
                    </li>
                    <li class="clearfix">
                        <a href="" title="" class="name">
                            <span class="index">5</span>
                             哈利波特2
                            <span class="grade green">4.7分</span>
                        </a>
                    </li>
                </ol>
            </div>
            <div class="viewitem" id="viewitem_2" style="display:none;">
                <ol class="mod-olist clearfix">
                    <li class="top-three img_show clearfix">
                        <span class="index">1</span>
                        <div class="img_txt_box">
                            <div class="pic">
                                <a href="" title="特殊身份333" target="_blank">
                                    <img src="http://p1.qhimg.com/t01c5d6faecb9a2ef03.jpg" alt="特殊身份333">
                                </a>
                            </div>
                            <div class="cont">
                                <h4 class="title">
                                    <a href="" class="title" title="特殊身份3" target="_blank">特殊身份3</a>
                                </h4>
                                <p>宇宙最能打3</p>
                                <p>主演：甄子丹</p>
                            </div>
                        </div>
                       <span class="grade green">5.8分</span>
                    </li>
                    <li class="top-three  clearfix">
                        <a href="" title="不二神探" class="name">
                            <span class="index">2</span>
                            不二神探3
                            <span class="grade yellow">5.2分</span>
                        </a>
                    </li>
                    <li class="top-three clearfix">
                        <a href="" title="" class="name">
                            <span class="index">3</span>
                            非常幸运3
                            <span class="grade red">4.5分</span>
                        </a>
                    </li>
                    <li class="clearfix">
                        <a href="" title="" class="name">
                            <span class="index">4</span>
                            非常完美3
                            <span class="grade red">4.3分</span>
                        </a>
                    </li>
                    <li class="clearfix">
                        <a href="" title="" class="name">
                            <span class="index">5</span>
                             哈利波特3
                            <span class="grade green">4.7分</span>
                        </a>
                    </li>
                </ol>
            </div>
    </div>
    </div>
</div>
<script type="text/javascript">
    //得到选项卡对象集合
    var otbs_nav_box = document.getElementById("tabs_nav");
    var otabs_array = otbs_nav_box.getElementsByTagName("a");
    var len = otabs_array.length;
    for(var i = 0;i<len;i++){
        //将当前点击的下标索引放在otabs_array[i].index 属性中
        otabs_array[i].index=i;
        //给每个选项卡按钮添加点击事件
        otabs_array[i].onclick=  function(){
            //先清除上一个选项卡的样式，所有的选项卡样式重新设置
           for(var j = 0;j<len;j++){
             otabs_array[j].setAttribute('class','tabitem');
             }
            //给当前点击的选项卡添加样式
            otabs_array[this.index].setAttribute('class','tabitem active');
            //得到选项卡对应的内容集合
            var otabs_content_box = document.getElementById("tabs_content");
            //ie 不支持getElementsByClassName  郁闷
           // var otabs_view_array = otabs_content_box.getElementsByClassName("viewitem");
            var otabs_view_array = [];
            for(var k = 0 ;k<len;k++){
                var tempobj = document.getElementById("viewitem_"+k);
                otabs_view_array.push(tempobj);
                otabs_view_array[k].style.display='none';
            }
            otabs_view_array[this.index].style.display='block';
        }     
    }
</script>