切换Tab栏目,然后对应卡片内容改变
请补全JavaScript代码,实现效果如下:
- 当点击某个栏目(题库、面试、学习、求职)时,该栏目背景色变为’#25bb9b’,其它栏目背景色位’#fff’。
- 当选中某个栏目时,下方内容就展示索引值相同的类名为".items"的"li"元素
- 必须使用DOM0级标准事件(onclick)
- 已使用自定义属性存储了栏目的索引值。点击栏目获取索引值,使用索引值控制类名为"items"下的"li"元素
<!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'));
//当Tab点击时
optionItems.forEach((item,index)=>{
//每个li Tab监听click事件
item.addEventListener('click',()=>{
//再遍历tab 和 对应选项卡 进行样式更改
optionItems.forEach((t,i)=>{
t.style.backgroundColor="#fff";
items[i].style.display="none"
})
//更改被点击元素的样式
item.style.backgroundColor="#25bb9b";
items[index].style.display="block"
})
})
</script>
</body>
</html>
但是今天另外值得学习的是
[ ].slice.call(document.querySelectorAll(‘.items li’));
[ ].slice.call(arguments)能将具有length属性的对象转成数组
slice是数组的切片方法,[ ]自身也是也是一个对象,而数组原型链上有这个slice这个方法。call() 方法绑定this,然后让后面过去的伪数组变成数组
伪数组变为数组的方法:
1.将伪数组遍历到新数组中
let newArr = [];
//然后遍历伪数组
for (let i = 0; i < arguments.length; i++ ) {
//将伪数组中的值通过索引逐个添加到新数组当中。
newArr[i] = arguments[i];
}
2.利用Array的原型对象的slice方法,配合call()方法修改slice中this指向
//slice原本是数组的截取子数组的方法,这里给数组的原型对象方法slice的指向强制改成arguments
let newArr = Array.prototype.slice.call(arguments)
3.利用扩展运算符(…)将伪数组转化为真数组
//ES6语法 let newArr=[];
let newArr = [...arguments];
4.利用ES6的Array.from方法
let newArr = Array.from(arguments)
这里的方法,如果想要了解什么是伪数组可以访问
伪数组和伪数组转数组方法