QQ列表 原始碼->可做選項卡
阿新 • • 發佈：2020-08-27
原始碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QQ列表</title> <style> #wrap { margin: 100px 300px; } #list { width: 210px; background: goldenrod; } h3 { padding-left: 30px; margin: 0; font: bold 24px/40px "微軟雅黑"; position: relative; } /* 小三角製作+插入到標籤 */ h3::before { width: 0px; height: 0px; content: " "; border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-left: 10px solid #2f2f2f; font-size: 0px; line-height: 0px; position: absolute; top: 10px; left: 10px; } /* 點選後的類名新增 旋轉90度*/ .on { padding-left: 30px; margin: 0; font: bold 24px/40px "微軟雅黑"; position: relative; } /* 旋轉效果 */ .on::before { transform: rotate(90deg); } li { list-style: none; font: bold 16px/32px "楷體"; color: honeydew; } /* 先隱藏列表內容 */ ul { display: none; margin: 0; padding-left: 10px; width: 200px; background: skyblue; } </style> </head> <body> <div id="wrap"> <div id="list"> <h3>遮天</h3> <ul> <li>葉天帝</li> <li>狠人大帝</li> <li>無始大帝</li> <li>輪迴天尊</li> <li>恆宇大帝</li> <li>虛空大帝</li> <li>亂古大帝</li> <li>青帝</li> <li>帝尊</li> </ul> </div> <div id="list"> <h3>朋友</h3> <ul> <li>鬥戰天書</li> <li>大五行術</li> <li>大切割術</li> <li>縮地成寸</li> <li>袖裡乾坤</li> </ul> </div> <div id="list"> <h3> 同事 </h3> <ul> <li>紫薇大帝</li> <li>葉天帝</li> <li>炎帝</li> <li>冥帝</li> </ul> </div> <div id="list"> <h3> 同學 </h3> <ul> <li>秦昊</li> <li>楊明</li> <li>楊洛</li> <li>地獄行者</li> <li>生而為王</li> </ul> </div> </div> <script> // 獲取元素 var oDiv = document.getElementById("wrap") var aDiv = oDiv.getElementsByTagName('div')//大的盒子 var aH3 = document.getElementsByTagName('h3')//分類的title var aUl = document.getElementsByTagName('ul')//分類的列表 for (var i = 0; i < aDiv.length; i++) {//根據分類項長度 實現點選事件 aDiv[i].index = i;//新增自定義索引 aDiv[i].falg = true;//給每個標籤中新增一個 自定義屬性 在每一個裡面裝開關 不會混亂 aDiv[i].onclick = function () { if (this.falg) {//判斷開關 == true 應該讓內容顯示並且小三角旋轉九十度 aUl[this.index].style.display = "block"; aH3[this.index].className = "on" } else { aUl[this.index].style.display = "none";//所有的內容都隱藏 aH3[this.index].className = "";//清空類名 } this.falg = !this.falg;//開關取反 } } </script> </body> </html>