题解 | #切换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":"// 请在这里输入代码"}
