题解 | #切换Tab栏目#
切换Tab栏目
https://www.nowcoder.com/practice/70916dc9292e470eb70ac2a0d3b9a404
<!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'));
// 补全代码
options.onclick = function(e) {
optionItems.map((item, index) => {
if (index == e.target.getAttribute('data-type')) {
item.style.backgroundColor = '#25bb9b';
items[index].style.display = 'block';
} else {
item.style.backgroundColor = '#fff';
items[index].style.display = 'none';
}
})
}
</script>
</body>
</html>
<!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'));
// 补全代码
options.addEventListener('click',function (e){
clearStyle(optionItems, 'color');
clearStyle(items, 'display');
items[e.target.attributes['data-type'].value].style.display = 'block';
e.target.style.backgroundColor = '#25bb9b';
})
// 清除样式
function clearStyle(root, type) {
if (type == 'display') {
for (let i = 0; i < root.length; i++) {
root[i].style.display = 'none';
}
} else {
for (let i = 0; i < root.length; i++) {
root[i].style.backgroundColor = '#fff';
}
}
}
</script>
</body>
</html>
