1 <button class="btn-active">按钮1</button>
2 <button>按钮2</button>
3 <button>按钮3</button>
4 <button>按钮4</button>
5 <div class="div-active">1</div>
6 <div>2</div>
7 <div>3</div>
8 <div>4</div>
9 <script type="text/javascript">
10 //1.先获取元素
11 var buttonList = document.getElementsByTagName("button");
12 var divList = document.getElementsByTagName("div");
13 //2.添加事件
14 for(var i = 0; i < buttonList.length; i++) {
15 (function(i){ //匿名函数自执行
16 buttonList[i].onclick = function() {
17 for(var j = 0; j < buttonList.length;j++) {
18 buttonList[j].className = "";
19 divList[j].className = "";
20 }
21 this.className = "btn-active";
22 divList[i].className = "div-active";
23 }
24 })(i)
25 }
26 </script>
1 <button class="btn-active">按钮1</button>
2 <button>按钮2</button>
3 <button>按钮3</button>
4 <button>按钮4</button>
5 <div class="div-active">1</div>
6 <div>2</div>
7 <div>3</div>
8 <div>4</div>
9 <script type="text/javascript">
10 //1.先获取元素
11 var buttonList = document.getElementsByTagName("button");
12 var divList = document.getElementsByTagName("div");
13 //2.添加事件
14 for(var i = 0; i < buttonList.length; i++) {
15 buttonList[i].index = i;
16 buttonList[i].onclick = function() {
17 for(var j = 0; j < buttonList.length;j++) {
18 buttonList[j].className = "";
19 divList[j].className = "";
20 }
21 this.className = "btn-active";
22 divList[this.index].className = "div-active";
23 }
24 }
25 </script>
1 <button style="background-color: yellow;">1</button>
2 <button>2</button>
3 <button>3</button>
4 <button>4</button>
5 <div style="display:block;">1</div>
6 <div>2</div>
7 <div>3</div>
8 <div>4</div>
9 <script type="text/javascript">
10 var buttonArr = document.getElementsByTagName("button");
11 var divArr = document.getElementsByTagName("div");
12 for(var i = 0; i < buttonArr.length;i++) {
13 buttonArr[i].index = i;
14 // buttonArr[i].setAttribute("index",i);
15 buttonArr[i].onclick = function() {
16 for(var j = 0; j < buttonArr.length; j++) {
17 buttonArr[j].style.backgroundColor = "#ccc";
18 buttonArr[this.index].style.backgroundColor = "yellow";
19 divArr[j].style.display = "none";
20 divArr[this.index].style.display = "block";
21 }
22 }
23 }
24
25 </script>
1 <button style="background-color: yellow;">1</button>
2 <button>2</button>
3 <button>3</button>
4 <button>4</button>
5 <div style="display:block;">1</div>
6 <div>2</div>
7 <div>3</div>
8 <div>4</div>
9 <script type="text/javascript">
10 //定义数组并获取数组内各个的节点
11 var buttonArr = document.getElementsByTagName("button");
12 var divArr = document.getElementsByTagName("div");
13 for(var i = 0; i < buttonArr.length;i++) {
14 buttonArr[i].onclick = function() {
15 //this
16 // alert(this.innerHTML)
17 //for循环遍历button数组长度
18 for(var j = 0; j < buttonArr.length; j++) {
19 //重置所有的button样式
20 buttonArr[j].style.backgroundColor = "#ccc";
21 //给当前的(点击的那个)那个button添加样式
22 this.style.backgroundColor = "yellow";
23 //隐藏所有的div
24 divArr[j].style.display = "none";
25 //判断当前点击是按钮数组中的哪一个？
26 if(this == buttonArr[j]) {
27 // alert(j);
28 //显示点击按钮对应的div
29 divArr[j].style.display = "block";
30 }
31 }
32 }
33 }
34 </script>
1 <ul id="ul1">
2 <li class="active">111</li>
3 <li>222</li>
4 <li>333</li>
5 <li>444</li>
6
7 </ul>
8 <script>
9 window.onload = function (){
10 var ul1 = document.getElementById('ul1');
11 var oli = ul1.getElementsByTagName('li');
12
13 ul1.onclick = function (e){
14 var e = e || window.event;
15 var target = e.target || e.srcElement;
16 for(var i = 0;i<oli.length;i++){
17 oli[i].className = '';
18 }
19 // e.target目标li
20 target.className = 'active';
21 };
22 };
23 </script>
