tab滑鼠移上切換頁面
阿新 • • 發佈：2021-08-13
排他思想
對應控制思想
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {margin:0; padding: 0;} ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } .hd { height: 45px; } .hd span { display:inline-block; width: 90px; background-color: pink; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { background-color: skyblue; } .bd div { height: 255px; background-color: skyblue; display: none; } .bd div.current { display: block; } </style> </head> <body> <div class="box"> <div class="hd" id="hd"> <span class="current">體育</span> <span>娛樂</span> <span>新聞</span> <span>綜合</span> </div> <div class="bd" id="bd"> <div class="current">我是體育模組</div> <div>我是娛樂模組</div> <div>我是新聞模組</div> <div>我是綜合模組</div> </div> </div> <script src="common.js"></script> <script> var hd = my$("hd"); var spans = hd.getElementsByTagName("span"); var hd = my$("bd"); var divs = hd.getElementsByTagName("div"); console.log(divs); for(var i=0;i<spans.length;i++){ //為每個spans設定一個index, 為了後續bd部分可以獲取下標 (對應控制思想) //因為this裡沒有下標相關的資料 spans[i].index = i; spans[i].onmouseover = function (){ console.log(this.index); //排他思想 //排除其他 for(var j=0;j<spans.length;j++){ spans[j].className = ""; divs[j].className = ""; } //保留自己 this.className = "current"; divs[this.index].className = "current"; }; } </script> </body> </html>