Tab切换--JavaScript基础

Tab切换–JavaScript基础

一个网页需要有三个必不可缺的部分，HTML、CSS、JS，本文和大家分享一个JS的基本知识–Tab切换。
先看看Tab切换达到的效果：

首先我们要编写html结构内容；

    <!-- 按钮部分 -->
    <ul id="btn" class="btn">
        <li class="active">tab-1</li>
        <li>tab-2</li>
        <li>tab-3</li>
    </ul>
    <!-- 显示内容 -->
    <div id="content" class="content">
        <div class="box1 show">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>

其次我们要渲染CSS样式：

    li{
        list-style:none;
    }
    .btn{
        overflow:hidden;
    }
    .btn li{
        float:left;
        width:100px;
        height:30px;
        line-height:30px;
        margin-right:30px;
        text-align:center;
        cursor:pointer;
        background:#ccc;
    }
    .btn li.active{
        background:blue;
    }
    .content{
        width:400px;
        height:300px;
        line-height:300px;
        margin-left:20px;
        text-align:center;
        border:2px solid blue;
        font-size:80px;
        color:blue;
    }
    .content div{
        display:none;
    }
    .content div.show{
        display:block;
    }

关键部分，我们使用JS实现Tab切换效果：

    var btn = document.getElementById('btn'),
        addBtn = btn.getElementsByTagName('li'),
        cnt = document.getElementById('content'),
        addDiv =  cnt.getElementsByTagName('div');

    for(var i = 0;i<addBtn.length;i++){
        // 给每一个li按钮添加一个属性，值为i
        addBtn[i].index = i;
        // 给每个li按钮添加一个绑定事件
        addBtn[i].onclick = function(){
            // for循环所有className属性
            for(var v=0;v<addBtn.length;v++){
                // 按钮属性清空
                addBtn[v].className = '';
                // div隐藏
                addDiv[v].style.display = 'none';
            }
            // Tab按钮添加active样式
            this.className = 'active';
            // 显示div
            addDiv[this.index].style.display = 'block';
            }
        }

我们通过JS代码，就可实现Tab切换，当然，实现这一效果的代码有很多种，希望本博文能够给大家带来帮助。