思路:使用事件委托将点击事件绑定在options元素上,event是具体的触发点击对象,第一步将所有元素背景颜色设为#fff,第二步将触发元素背景颜色设为#25bb9b,第三步将所有元素显示状态设置为none,第四步将触发元素对应data-type编号的元素显示状态设置为block。
<script> var options = document.querySelector('.options'); var optionItems = [].slice.call(document.querySelectorAll('.options li')); var items = [].slice.call(document.querySelectorAll('.items li')); //事件委托 将点击事件绑定在options元素上 event是具体的触发点击对象 options.onclick = function (event) { //将所有元素背景颜色设为#fff optionItems.forEach((item) => { item.style.backgroundColor = '#fff' }) //将触发元素背景颜色设为#25bb9b event.target.style.backgroundColor = '#25bb9b' //将所有元素显示状态设置为none items.forEach((item) => { item.style.display = 'none' }) //将触发元素对应data-type编号的元素显示状态设置为block items[event.target.dataset.type].style.display = 'block' } </script>
总结:由于是options元素的每一个子元素都可能click,故可以使用事件委托。btw,不知道是不是编译器原因,我使用一个pre记录上一个被点击的元素下标,但是牛客编译器不给过。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> ul { padding: 0; margin: 0; list-style: none; } .options li { float: left; width: 100px; height: 40px; line-height: 40px; text-align: center; border: solid 1px #ddd; } .items li { width: 405px; height: 405px; display: none; border: solid 1px #ddd; } </style> </head> <body> <ul class='options'> <li data-type="0" style='background-color: #25bb9b;'>题库</li> <li data-type="1">面试</li> <li data-type="2">学习</li> <li data-type="3">求职</li> </ul> <ul class='items'> <li style="display: block;">牛客题库,包含编程题、选择题等</li> <li>为你的面试提供一站式服务</li> <li>校招学习来牛客</li> <li>求职中有什么难题,可以联系我们</li> </ul> <script> var options = document.querySelector('.options'); var optionItems = [].slice.call(document.querySelectorAll('.options li')); var items = [].slice.call(document.querySelectorAll('.items li')); let pre=0 optionItems.forEach((item,index)=>{ item.onclick=()=>{ optionItems[pre].style.backgroundColor='#fff' optionItems[index].style.backgroundColor='#25bb9b' items[pre].style.display='none' items[index].style.display='block' pre=index } }) </script> </body> </html>
所以为啥不给过啊??????????