JS36. 切换Tab栏目
描述
请补全JavaScript代码，实现效果如下：HTML/CSS/JavaScript 解法, 执行用时: 1693ms, 内存消耗: 77788KB, 提交时间: 2022-02-10
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <style>\n ul {\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .options li {\n float: left;\n width: 100px;\n height: 40px;\n line-height: 40px;\n text-align: center;\n border: solid 1px #ddd;\n }\n\n .items li {\n width: 405px;\n height: 405px;\n display: none;\n border: solid 1px #ddd;\n }\n </style>\n </head>\n <body>\n <ul class='options'>\n <li data-type=\"0\" style='background-color: #25bb9b;'>题库</li>\n <li data-type=\"1\">面试</li>\n <li data-type=\"2\">学习</li>\n <li data-type=\"3\">求职</li>\n </ul>\n <ul class='items'>\n <li style=\"display: block;\">牛客题库，包含编程题、选择题等</li>\n <li>为你的面试提供一站式服务</li>\n <li>校招学习来牛客</li>\n <li>求职中有什么难题，可以联系我们</li>\n </ul>\n\n <script>\n var options = document.querySelector('.options');\n var optionItems = [].slice.call(document.querySelectorAll('.options li'));\n var items = [].slice.call(document.querySelectorAll('.items li'));\n // 补全代码\n /*for (let i = 0; i < optionItems.length; i++) {\n optionItems[i].onclick = function() {\n for (let j = 0; j < optionItems.length; j++) {\n optionItems[j].style.backgroundColor = '#fff'\n items[j].style.display = 'none'\n }\n optionItems[i].style.backgroundColor = '#25bb9b'\n items[i].style.display = 'block'\n } \n }*/\n // 补全代码\n options.onclick = function(e){\n for(let i in optionItems){\n if(e.target===optionItems[i]){\n optionItems[i].style.backgroundColor = '#25bb9b'\n items[i].style.display = 'block'\n }else{\n optionItems[i].style.backgroundColor = '#fff'\n items[i].style.display = 'none'\n }\n }\n}\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1757ms, 内存消耗: 77832KB, 提交时间: 2021-12-14
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <style>\n ul {\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .options li {\n float: left;\n width: 100px;\n height: 40px;\n line-height: 40px;\n text-align: center;\n border: solid 1px #ddd;\n }\n\n .items li {\n width: 405px;\n height: 405px;\n display: none;\n border: solid 1px #ddd;\n }\n </style>\n </head>\n <body>\n <ul class='options'>\n <li data-type=\"0\" style='background-color: #25bb9b;'>题库</li>\n <li data-type=\"1\">面试</li>\n <li data-type=\"2\">学习</li>\n <li data-type=\"3\">求职</li>\n </ul>\n <ul class='items'>\n <li style=\"display: block;\">牛客题库，包含编程题、选择题等</li>\n <li>为你的面试提供一站式服务</li>\n <li>校招学习来牛客</li>\n <li>求职中有什么难题，可以联系我们</li>\n </ul>\n\n <script>\n var options = document.querySelector('.options');\n var optionItems = [].slice.call(document.querySelectorAll('.options li'));\n var items = [].slice.call(document.querySelectorAll('.items li'));\n // 补全代码\n options.onclick=function(e){\n for(let i in optionItems)\n if(e.target===optionItems[i]){\n optionItems[i].style.backgroundColor='#25bb9b'\n items[i].style.display='block'\n }else{\n optionItems[i].style.backgroundColor='#fff'\n items[i].style.display='none'\n }\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1761ms, 内存消耗: 77880KB, 提交时间: 2022-01-25
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <style>\n ul {\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .options li {\n float: left;\n width: 100px;\n height: 40px;\n line-height: 40px;\n text-align: center;\n border: solid 1px #ddd;\n }\n\n .items li {\n width: 405px;\n height: 405px;\n display: none;\n border: solid 1px #ddd;\n }\n </style>\n </head>\n <body>\n <ul class='options'>\n <li data-type=\"0\" style='background-color: #25bb9b;'>题库</li>\n <li data-type=\"1\">面试</li>\n <li data-type=\"2\">学习</li>\n <li data-type=\"3\">求职</li>\n </ul>\n <ul class='items'>\n <li style=\"display: block;\">牛客题库，包含编程题、选择题等</li>\n <li>为你的面试提供一站式服务</li>\n <li>校招学习来牛客</li>\n <li>求职中有什么难题，可以联系我们</li>\n </ul>\n\n <script>\n var options = document.querySelector('.options');\n var optionItems = [].slice.call(document.querySelectorAll('.options li'));\n var items = [].slice.call(document.querySelectorAll('.items li'));\n // 补全代码\n options.onclick = function(e) {\n optionItems.map((item, index) => {\n if (index == e.target.getAttribute('data-type')) {\n item.style.backgroundColor = '#25bb9b';\n items[index].style.display = 'block';\n } else {\n item.style.backgroundColor = '#fff';\n items[index].style.display = 'none';\n }\n })\n}\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1766ms, 内存消耗: 77812KB, 提交时间: 2021-12-19
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <style>\n ul {\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .options li {\n float: left;\n width: 100px;\n height: 40px;\n line-height: 40px;\n text-align: center;\n border: solid 1px #ddd;\n }\n\n .items li {\n width: 405px;\n height: 405px;\n display: none;\n border: solid 1px #ddd;\n }\n </style>\n </head>\n <body>\n <ul class='options'>\n <li data-type=\"0\" style='background-color: #25bb9b;'>题库</li>\n <li data-type=\"1\">面试</li>\n <li data-type=\"2\">学习</li>\n <li data-type=\"3\">求职</li>\n </ul>\n <ul class='items'>\n <li style=\"display: block;\">牛客题库，包含编程题、选择题等</li>\n <li>为你的面试提供一站式服务</li>\n <li>校招学习来牛客</li>\n <li>求职中有什么难题，可以联系我们</li>\n </ul>\n\n <script>\n var options = document.querySelector('.options');\n var optionItems = [].slice.call(document.querySelectorAll('.options li'));\n var items = [].slice.call(document.querySelectorAll('.items li'));\n // 补全代码\n options.onclick = function (e) {\n for (var i = 0; i < optionItems.length; i++) {\n optionItems.every((ele) => ele.style.backgroundColor = \"#fff\");\n e.target.style.backgroundColor = \"#25bb9b\";\n items.every((ele) => ele.style.display = \"none\");\n items[e.target.dataset.type].style.display = \"block\";\n };\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1766ms, 内存消耗: 77904KB, 提交时间: 2022-01-25
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <style>\n ul {\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .options li {\n float: left;\n width: 100px;\n height: 40px;\n line-height: 40px;\n text-align: center;\n border: solid 1px #ddd;\n }\n\n .items li {\n width: 405px;\n height: 405px;\n display: none;\n border: solid 1px #ddd;\n }\n </style>\n </head>\n <body>\n <ul class='options'>\n <li data-type=\"0\" style='background-color: #25bb9b;'>题库</li>\n <li data-type=\"1\">面试</li>\n <li data-type=\"2\">学习</li>\n <li data-type=\"3\">求职</li>\n </ul>\n <ul class='items'>\n <li style=\"display: block;\">牛客题库，包含编程题、选择题等</li>\n <li>为你的面试提供一站式服务</li>\n <li>校招学习来牛客</li>\n <li>求职中有什么难题，可以联系我们</li>\n </ul>\n\n <script>\n var options = document.querySelector('.options');\n var optionItems = [].slice.call(document.querySelectorAll('.options li'));\n var items = [].slice.call(document.querySelectorAll('.items li'));\n // 补全代码\n options.onclick=function(e){\n items.forEach((element,index)=> {\n if(index == e.target.dataset.type) {\n optionItems[index].style.backgroundColor = \"#25bb9b\"\n element.style.display=\"block\"\n }else{\n optionItems[index].style.backgroundColor = \"#fff\"\n element.style.display=\"none\"\n }\n });\n }\n </script>\n </body>\n</html>","libs":[]}