366day(dom了解,选项)

《2018年10月4日》【连续366天】

标题:dom了解,选项卡;
内容:

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.content {
			display: none;
			width: 200px;
			height: 200px;
			border: 2px solid red;
		}
		.active {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="j3.js"></script>
	<div class="wrapper">
		<button class="active">1</button>
		<button>2</button>
		<button>3</button>
		<div class="content" style="display: block;">111</div>
		<div class="content">222</div>
		<div class="content">333</div>
	</div>
</body>
// DOM
// Document Object Model

var btn = document.getElementsByTagName('button');
var div = document.getElementsByClassName('content');

// 有点问题
// for(var i = 0; i< btn.length;i++){
// 	(function(n){
// 		btn[n].onclick = function(){
// 			for(var j = 0;j < btn.length; j++){
// 				btn[j].className = "";
// 				div[j].style.display = "none";
// 			}
// 			this.className = "active";
// 			div[n].style.display = "block";
// 		}
// 	}(i));
// }

366day(dom了解,选项)

遇到了怪事。。js 代码载入没问题,但那个for循环只能在console里面运行,

找了半天原因,没想到在这里。

查一下原因。