Teraflopst/tabbed-content-js.html

## tabbed-content-js.html
<!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>
	<!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>