32、JavaScript中选项卡的实现-蒲公英云

32、JavaScript中选项卡的实现

1、CSS代码

<style>
            #div1 input {
                background: #CCC;
            }
            #div1 .active {
                background: yellow;
            }
            #div1 div {
                width: 200px;
                height: 200px;
                background: #CCC;
                display: none;
            }
        </style>

2、JavaScript代码

<script>
            window.onload = function() {
                tabSwitch('div1');
            };
            /*选项卡的实现原理,先把所有的隐藏，再把当前的显示*/
            function tabSwitch(id) {
                var oDiv = document.getElementById(id);
                var aBtn = oDiv.getElementsByTagName('input');
                var aDiv = oDiv.getElementsByTagName('div');
                var i = 0;
                /*默认的情况下是,显示第一个按钮和第一个DIV*/
                for (i = 0; i < aBtn.length; i++) {
                    aBtn[i].index = i;
                    aBtn[i].onclick = function() {
                        /*1、首先将所有的按钮的样式去掉,和隐藏所有的DIV*/
                        for (i = 0; i < aBtn.length; i++) {
                            aBtn[i].className = '';
                            aDiv[i].style.display = 'none';
                        }
                        /*2、在给当前的按钮加上class样式,和显示具体的一个DIV*/
                        this.className = 'active';
                        aDiv[this.index].style.display = 'block';
                    };
                }
            }
        </script>

3、Html代码

<body>
        <div id="div1">
            <input class="active" type="button" value="教育" />
            <input type="button" value="财经" />
            <input type="button" value="aaa" />
            <div style="display:block;">1asdfasdfds</div>
            <div>2xzcvxzcv</div>
            <div>5332342345</div>
        </div>
    </body>