“豆瓣鵝組”等小組被停用，豆瓣進一步加強“飯圈”亂象治理
阿新 • • 發佈：2022-04-14
<style> * { padding: 0; margin: 0; } .box { width: 500px; height: 200px; border: 1px solid #ccc; margin: 50px auto; overflow: hidden; } ul { width: 600px; height: 40px; margin-left: -1px; list-style: none; } li { float: left; width: 101px; height: 40px; text-align: center; font: 600 18px/40px "simsun"; background-color: pink; cursor: pointer; } span { display: none; width: 500px; height: 160px; background-color: yellow; text-align: center; font: 700 100px/160px "simsun"; } .show { display: block; } .current { background-color: yellow; } </style> <script> window.onload = function () { //需求：滑鼠放到上面的li上，li本身變色(新增類)，對應的span也顯示出來(新增類);//思路：1.點亮上面的盒子。 2.利用索引值顯示下面的盒子。 var liArr = document.getElementsByTagName("li"); var spanArr = document.getElementsByTagName("span"); for (var i = 0; i < liArr.length; i++) { //繫結索引值（新增一個自定義屬性：index屬性） liArr[i].index = i; liArr[i].onclick = function () { //1.點亮上面的盒子。 2.利用索引值顯示下面的盒子。(排他思想) for (var j = 0; j < liArr.length; j++) { liArr[j].className = ""; spanArr[j].className = ""; } this.className = "current"; spanArr[this.index].className = "show"; //【重要程式碼】 }; } }; </script> </head> <body> <div class="box"> <ul> <li class="current">鞋子</li> <li>襪子</li> 1 <li>帽子</li> <li>褲子</li> <li>裙子</li> </ul> <span class="show">鞋子</span> <span>襪子</span> <span>帽子</span> <span>褲子</span> <span>裙子</span> </div> </body>