使用原生Js实现的Tab栏切换效果 效果图如下

Tab

在线预览 :http://codepen.io/zoeblow/pen/rVrqKg

html代码

<div id="box" class="tab">
<ul>
    <li class="hover">去大肚子</li>
    <li>清除色斑</li>
    <li style="border-right: 0;">男性减肥</li>
</ul>
<div class="dis"><a href="#"><img src="http://i1.tietuku.com/8ef53a7a2d48f57f.jpg" alt="" /></a></div>
<div><a href="#"><img src="http://i1.tietuku.com/66e1a3bb280e888d.jpg" alt="" /></a></div>
<div><a href="#"><img src="http://i1.tietuku.com/23ef98c6c2d59771.jpg" alt="" /></a></div>
</div>

CSS代码

*{
            padding: 0 ;
            margin: 0;
            list-style: none;
        }
        .tab{
            width: 333px;
            border: 1px solid #cccccc;
            margin: 10px auto;
        }
        #box ul{
            height: 41px;
        }
        .tab .hover{
            background: #ffffff;
            border-bottom: #ffffff;
        }
        .tab li{
            float: left;
            line-height: 40px;
            width: 110px;
            text-align: center;
            background: #f9f9f9;
            border-bottom: 1px solid #cccccc;
            border-right: 1px solid #cccccc ;
        }
        .tab div{
            margin: 10px auto;
            width: 292px;
            display: none;
        }
        .tab .dis{
            display: block;
        }
        img{
          border:0 none;
          text-decoration: ;
        }

Js代码

var box =  document.getElementById('box')
       var lis = box.getElementsByTagName('li')
       var divs = box.getElementsByTagName('div')
for (i=0;i&lt;lis.length;i++){
       lis[i].index=i;
       lis[i].onmouseover= function () {
           for(i=0;i&lt;lis.length;i++){
               lis[i].className=''
               divs[i].style.display='none'
           }
           this.className='hover'
           divs[this.index].style.display='block'
       }
   }