js实现tab栏切换效果（一）

利用javascript实现tab栏切换效果，其中原理“置之死地而后生”，先把所有人干掉，自己再复活。
直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 300px; margin: 100px auto; border: 1px solid #ccc; } .content div{ width: 100%; height: 300px; background-color: gold; display: none; line-height: 300px; text-align: center; } .gold{ background-color: gold; } </style>
        <script type="text/javascript"> window.onload = function(){ var btns = document.getElementsByTagName("button"); var divs = document.getElementById("dd").getElementsByTagName("div"); for (var i=0;i<btns.length;i++) { //因为上面的button按钮与下面的div盒子是一一对应关系，所以我们用一个序列号index来控制 //给每个btns[i]添加一个属性index btns[i].index = i; btns[i].onclick = function(){ for (var j=0;j<btns.length;j++) { btns[j].className=""; } // 先清空所有按钮的类名，再给当前的按钮添加一个类名 “置之死地而后生” this.className="gold"; // 同理，首先隐藏所有的div盒子，再显示与button当前索引号相同的div盒子 for (var k=0;k<divs.length;k++) { divs[k].style.display="none"; } divs[this.index].style.display="block"; } } } </script>
    </head>
    <body>
       <div class="box">
           <div class="title">
               <button class="gold">语文</button>
               <button>数学</button>
               <button>英语</button>
               <button>物理</button>
           </div>
           <div class="content" id="dd">
               <div style="display: block;">语文内容介绍</div>
               <div>数学内容介绍</div>
               <div>英语内容介绍</div>
               <div>物理内容介绍</div>
            </div>
        </div>

</body>

</html>

js实现tab栏切换效果（一）

其实代码还可以再进行优化，优化后的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 300px; margin: 100px auto; border: 1px solid #ccc; } button{ cursor: pointer; } .content div{ width: 100%; height: 300px; background-color: gold; display: none; line-height: 300px; text-align: center; } .gold{ background-color: gold; } .content .show{ display: block; } </style>
        <script type="text/javascript"> window.onload = function(){ var btns = document.getElementsByTagName("button"); var divs = document.getElementById("dd").getElementsByTagName("div"); for (var i=0;i<btns.length;i++) { // 给每一个button添加一个属性index  btns[i].index=i; btns[i].onclick = function(){ for (var j= 0;j<btns.length;j++) { btns[j].className=""; divs[j].className=""; } this.className = "gold"; divs[this.index].className="show"; } } } </script>
    </head>
    <body>
       <div class="box">
           <div class="title">
               <button class="gold">语文</button>
               <button>数学</button>
               <button>英语</button>
               <button>物理</button>
           </div>
           <div class="content" id="dd">
               <div class="show">语文内容介绍</div>
               <div>数学内容介绍</div>
               <div>英语内容介绍</div>
               <div>物理内容介绍</div>
            </div>
        </div>

</body>

</html>

想实现多tab栏切换效果，看js实现多tab切换效果

秒客网

js实现tab栏切换效果（一）

相关文章