javaScript 页面中多个选项卡效果

1.HTML代码

<!--第一个选项卡-->
<div id="box1" class="wrap">
    <p class="nav"> <!--按钮-->
        <span class="active">体育</span>
        <span>军事</span>
        <span>娱乐</span>
    </p>
    <div class="on">体育</div><!--内容-->
    <div>军事</div>
    <div>娱乐</div>
</div>
<!--第二个-->
<div id="box2" class="wrap">
    <p class="nav">
        <span class="active">体育</span>
        <span>军事</span>
        <span>娱乐</span>
    </p>
    <div class="on">体育</div>
    <div>军事</div>
    <div>娱乐</div>
</div>

2.css代码

.wrap{
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    float: left;
    margin-right: 20px;
}
.nav {
    margin: 0;
    width: 300px;
    height: 50px;
    border: 1px solid #000;
}
.nav span{
    display:block;
    float: left;
    width:100px;
    height: 50px;
    line-height: 50px;
    text-align: center;

}
.nav  .active{
    background: #cc0000;
    color: white;
    cursor: pointer;
}
.wrap div{
    width: 300px;
    height: 250px;
    font-size: 30px;
    line-height: 250px;
    text-align: center;
    display: none;
}
.wrap .on{
    display: block;
}

3.js代码

function tab(id,aEve){//id 选项卡外框ID ，aEve按钮发生的事件
    var oBox = document.getElementById(id);
    //获取各个元素
    var aBtn = oBox.getElementsByTagName('span');
    var aCont = oBox.getElementsByTagName('div');

    for (var i =0;i<aBtn.length;i++){
        aBtn[i].index=i; //为每个按钮自定义属性，该属性存放每个按钮的下标
        aBtn[i][aEve] = function () {
            for (var i = 0; i<aBtn.length;i++){
                aBtn[i].className='';//清空所有按钮选中样式
                aCont[i].className='';//清空所有内容样式
            }
            this.className = 'active';//为当前按钮添加选中样式
            aCont[this.index].className='on';//this.index对应当前按钮的下标  为当前所对应的内容添加显示样式
        }
    }
}
window.onload = function () {//网页加载结束后执行
    tab('box1','onclick');//调用函数
    tab('box2','onmousemove');
}

 效果图：