JS36 切换Tab栏目

最新推荐文章于 2025-12-09 14:34:24 发布

原创最新推荐文章于 2025-12-09 14:34:24 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

js 专栏收录该内容

27 篇文章

订阅专栏

文章介绍了如何使用JavaScript实现Tab栏目的切换功能，通过监听click事件并改变元素样式来达到选中效果。同时，文章提到了将伪数组转换为数组的几种方法，如使用slice.call、扩展运算符和Array.from。

切换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)

这里的方法，如果想要了解什么是伪数组可以访问
伪数组和伪数组转数组方法