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));
// }
遇到了怪事。。js 代码载入没问题,但那个for循环只能在console里面运行,
找了半天原因,没想到在这里。
查一下原因。