# 圖片選項卡，類似tabs頁簽 ``` <style> ul,li{ margin:0; padding:0; list-style: none; } ul{ overflow: hidden; } li{ width: 100px; height: 40px; background-color: #eee; border: 1px solid #ccc; float: left; line-height: 40px; text-align: center; } div{ width: 406px; height: 406px; border: 1px solid #ccc; } img{ width: 406px; height: 406px; display: none; } </style> <ul> <li>大橘</li> <li>英短</li> <li>美短</li> <li>布偶</li> </ul> <div> <img src="./ju.jpg" alt="" style="display: block;"> <img src="./ying.jpg" alt=""> <img src="./hu.jpg" alt=""> <img src="./bu.jpg" alt=""> </div> <script> // 邏輯：1.移動到哪個選項卡上，自己的背景顏色要改變 2.對應的內容區域要顯示 // 同理，移出時，背景顏色恢復，對應內容區域隱藏 let li = document.getElementsByTagName('li'); let img = document.getElementsByTagName('img'); for(let i = 0;i<li.length;i++){ // 先進行元素數組 下標的設置 li[i].index = i; li[i].onmouseover = function(){ this.style.backgroundColor = 'yellow'; // console.log(this.index); // 先把所有的圖片都隱藏，再讓對應的圖片出現 for(let j=0;j<img.length;j++){ img[j].style.display = 'none'; } img[this.index].style.display = 'block'; } //鼠標離開恢復顏色 li[i].onmouseout = function(){ li[i].style.backgroundColor = '#eee'; } } </script> ``` 效果圖：