思路:使用事件委托将点击事件绑定在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>
所以为啥不给过啊??????????



京公网安备 11010502036488号