用js制作选项卡
選項卡在網頁中十分常見，因此學習js時選項卡是一個不能繞過的東西。
下面是一個簡單的選項卡。
在這其中，像我這樣的新學者就因為異步卡在13行一直無法理解為什么13行需要aBtn[i].ind=i; ?而不能在下面aDiv【i】這樣直接使用。
首先可以證明一下如果aBtn.οnclick=function()函數中插入 alert（i）；彈窗出來的結果始終是i=4；因為在for循環中有函數，函數和for循環不能同步進行，在觸發事件執行函數時，for循環已經完成了，此時i為最大值4，這個就是異步。所以需要重新定義按鈕的索引。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>window.onload = function(){var aBtn = document.getElementsByTagName('button');var aDiv =document.getElementsByTagName('div');for(var i = 0; i < aBtn.length;i++){//給每個按鈕綁定一個索引屬性 第一個按鈕ind 為0 第二個按鈕 ind 為1. 第二個按鈕ind為2aBtn[i].ind = i;alert(i);aBtn[i].onclick = function(){for(var j = 0;j < aBtn.length;j++){//將所有div 先隱藏 aDiv[j].style.display = 'none';//所有按鈕背景顏色先去掉aBtn[j].style.background = '';}//在把對應的div顯示 和按鈕的背景變藍//this就是你點擊哪個按鈕 this就是那個按鈕 上面為每一按鈕都綁定了一個ind屬性 this.ind就是你點擊哪個按鈕就是指哪個按鈕的ind屬性 上面說了第一個按鈕ind 為0 第二個按鈕ind為1 。。。。this.style.background = 'blue';aDiv[this.ind].style.display = 'block';}}}</script><style>div{width: 150px;height: 150px;border: 1px solid black;display: none;}</style> </head> <body><button style="background:blue;">按鈕1</button><button>按鈕2</button><button>按鈕3</button><button>按鈕4</button><div style="display:block;">1</div><div>2</div><div>3</div><div>4</div> </body> </html>?
轉載于:https://www.cnblogs.com/momomiji/p/7594055.html
總結
- 上一篇： 仿ArrayList功能的bag类
- 下一篇： 17-TypeScript代理模式