Teraflopst
10/8/2015 - 9:30 AM

Lab: Tabbed Content with JavaScript (v0.1)

Lab: Tabbed Content with JavaScript (v0.1)

tabbed-content-js.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select cards</title>
    <style>
        #container .active{ background: yellow; border: 0; }
        #container div {
            display: none;
            width: 200px;
            height: 200px;
            border: 1px solid #999;
            background: yellow;
        }
    </style>
    <script>
    window.onload = function (){
        var oDiv = document.getElementById('container');
        var aBtn = oDiv.getElementsByTagName('input');
        var aDiv = oDiv.getElementsByTagName('div');
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].index = i;
            aBtn[i].onclick = function (){
                for (var i = 0; i < aBtn.length; i++) {
                    aBtn[i].className = '';
                    aDiv[i].style.display = 'none';
                }
                this.className = 'active'; //此处的 this 就是发生 onclick 事件的 aBtn[i]，如果直接写成 aBtn[i]，那么它将不会随着 for 循环递增
                aDiv[this.index].style.display = 'block'; //此处 this 同上，这里思路是通过引用递增的 aBtn[i] 中的 i。这里和上面的 aBtn[i].index = i; 呼应。
            }
        }
    }
    </script>
</head>
<body>
    <div id="container">
        <input type="button" value="教育" class="active" />
        <input type="button" value="培训"  />
        <input type="button" value="招生" />
        <input type="button" value="出国" />
        <div style="display: block;">教育</div>
        <div>培训</div>
        <div>招生</div>
        <div>出国</div>
    </div>
</body>
</html>