题解 | #切换Tab栏目#

切换Tab栏目

https://www.nowcoder.com/practice/70916dc9292e470eb70ac2a0d3b9a404

{"html":"<!DOCTYPE html>\r\n<html lang=\"en\">\r\n    <head>\r\n        <meta charset=\"UTF-8\">\r\n        <style>\r\n            ul {\r\n                padding: 0;\r\n                margin: 0;\r\n                list-style: none;\r\n            }\r\n\r\n            .options li {\r\n                float: left;\r\n                width: 100px;\r\n                height: 40px;\r\n                line-height: 40px;\r\n                text-align: center;\r\n                border: solid 1px #ddd;\r\n            }\r\n\r\n            .items li {\r\n                width: 405px;\r\n                height: 405px;\r\n                display: none;\r\n                border: solid 1px #ddd;\r\n            }\r\n        </style>\r\n    </head>\r\n    <body>\r\n        <ul class='options'>\r\n            <li data-type=\"0\" style='background-color: #25bb9b;'>题库</li>\r\n            <li data-type=\"1\">面试</li>\r\n            <li data-type=\"2\">学习</li>\r\n            <li data-type=\"3\">求职</li>\r\n        </ul>\r\n        <ul class='items'>\r\n            <li style=\"display: block;\">牛客题库,包含编程题、选择题等</li>\r\n            <li>为你的面试提供一站式服务</li>\r\n            <li>校招学习来牛客</li>\r\n            <li>求职中有什么难题,可以联系我们</li>\r\n        </ul>\r\n\r\n        <script>\r\n            var options = document.querySelector('.options');\r\n            var optionItems = [].slice.call(document.querySelectorAll('.options li'));\r\n            var items = [].slice.call(document.querySelectorAll('.items li'));\r\n            // 补全代码\r\n            options.onclick=function(e){\r\n          \r\n                optionItems.forEach((item,index)=>{\r\n                    item.style.backgroundColor = ''\r\n                    items[index].style.display = 'none'\r\n                })\r\n                \r\n                optionItems[e.target.dataset.type].style.backgroundColor=\"#25bb9b\";\r\n            items[e.target.dataset.type].style.display = 'block'\r\n            }\r\n        </script>\r\n    </body>\r\n</html>","css":"/* html, body {\\n\\twidth: 100%;\\n\\theight: 100%;\\n\\tmargin: 0;\\n\\tpadding: 0;\\n} */","js":"// 请在这里输入代码"}

全部评论

相关推荐

评论
点赞
收藏
分享
牛客网
牛客企业服务