思路:使用事件委托将点击事件绑定在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>

所以为啥不给过啊??????????