题解 | #切换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>