一、知识要点

1、自定义下标属性
2、综合使用getElementsByTagName

二、源码参考

<!DOCTYPE >
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            #div1,
            #div2,
            #div3 {
                width: 200px;
                height: 100px;
                border: 1px solid #999;
            }
        </style>
        <script>
            window.onload = function() {
                var tab = document.getElementsByTagName('input');
                var show = document.getElementsByTagName('div');

                tab[0].style.background = 'red';
                show[1].style.display = 'none';
                show[2].style.display = 'none';

                for(var i = 0; i < tab.length; i++) {
                    tab[i].index = i;
                    tab[i].onclick = function() {
                        for(var j = 0; j < tab.length; j++) {
                            tab[j].style.background = '';
                            show[j].style.display = 'none';
                        }
                        this.style.background = 'red';
                        show[this.index].style.display = 'block';
                    }
                }

            }
        </script>
    </head>

    <body>
        <input type="button" name="btn1" id="btn1" value="tab1" />
        <input type="button" name="btn2" id="btn2" value="tab2" />
        <input type="button" name="btn3" id="btn3" value="tab3" />
        <div id="div1">
            1111
        </div>
        <div id="div2">
            2222
        </div>
        <div id="div3">
            3333
        </div>

    </body>

</html>