/* 经过昨天一整天的纠结和摸索。总结下学习初期我最致命的几个问题……
1、var oDiv = document.getElementById(''); 一定要多输，熟悉后o u什么的字母别搞错了 .后不能有空格啥的， E大写这些都还好，Elements 如果是s，后面接的是 className 或者 TagName 。
2、在js中，一定要区分清楚 class 和className ，前面很容易搞混……
3、遍历 for循环后，操作的对象一般是标签或者class，这是很多个对象，所以 一定要有[]…… ！！！
*/
------------------------------------------------正文的html ------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>简单的选项卡</title>
<style type="text/css">
#div1 .active{ background:#FF9; }
#div1 div{ width:200px; height:200px; border:1px solid #333; background:#CCC; display:none; }
</style>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="培训" />
<input type="button" value="招生" />
<input type="button" value="出国" />
<div style="display:block;">教育</div>
<div>培训</div>
<div>招生</div>
<div>出国</div>
</div>
<script src="js/xuanxiangka.js"></script>
</body>
</html>
------------------------------------------javascript代码 ---------------------------------------------------
//window.onload 以后记住，都把它添上吧，有备无患
window.onload = function() {
var oDiv = document.getElementById('div1'); //要操作什么量，就把这些都先声明了
var oBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i=0; i<oBtn.length; i++) { //for循环，具体操作什么看循环中间的值，oBtn所以是操作4个按钮
oBtn[i].index = i; //赋每个按钮的属性（这里的属性是自定义属性）的值为i
oBtn[i].onclick = function() { //对每个按钮添加一个点击的事件
for(var i=0; i<oBtn.length; i++) { //继续用for循环，上一个是点击的for循环，这个循环用来操作点击后的后续事件
oBtn[i].className = ''; //让每个按钮的class名为空
aDiv[i].style.display = 'none'; //让每个div的style样式的display为none;
}
this.className = 'active'; //当前点击（对应onclick）对象的class名为 active
aDiv[this.index].style.display = 'block'; //aDiv（按钮下的div） this.index（赋了i的，就是说当前点击按钮对应的div） 的样式display为none
}
}
}
总结下 今天学到的。 做这样一个选项卡，总的思路就是，
先让所有的都隐藏，再让当前的显示出来~~~~
明天一练，坚持学习， 勤于思考，让自己有所进步和收获~加油
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
