原生JS实现选项卡

我是段段

已于 2022-04-09 11:02:21 修改

阅读量710

点赞数 2

分类专栏： JavaScript 文章标签： css html5 javascript visual studio code 开发语言

于 2021-09-08 16:29:37 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43432158/article/details/120183061

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

📝 个人简介

⭐ 个人主页：我是段段🙋‍
🍊 博客领域：编程基础、前端💻
🍅 写作风格：干货！干货！都是干货！
🍑 精选专栏：JavaScript
🛸 支持段段：点赞👍、收藏⭐、留言💬

废话不多说，直接上代码~

html代码

<div class="wrap">
    <ul>
        <li class="eat">早饭</li>
        <li>中饭</li>
        <li>午饭</li>
    </ul>
    <div class="eat-detail">豆浆、青椒鸡蛋、宫保鸡丁</div>
    <div>米饭、麻辣羊肉、酸辣土豆丝</div>
    <div>鱼香肉丝、孜然羊肉</div>
</div>

css代码

* {
    margin: 0;
    padding: 0
}

ul,
li {
    list-style-type: none;
}

.wrap {
    height: 300px;
    width: 500px;
    border: 1px solid #D6D6D6;
    margin: 20px;
}

.wrap ul {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #D6D6D6;
    display: flex;
    text-align: center;
}

.wrap li{
    flex: 1;
    cursor: pointer;
    border-right: 1px solid #D6D6D6
}

.wrap li:nth-child(3){
    border-right: none;
}

.eat{
    background-color: #5C7AE5;
    color: #FFFFFF;
}

.wrap div{
    display: none;
}

.wrap .eat-detail{
    display: block;
    text-align: center;
    padding: 109px 0;
    background-color: gray;
    color: #FFFFFF;
}

html和css代码相对比较简单，这里不做过多解释，主要分析js代码

js代码

首先获取DOM元素

let wrap = document.getElementsByClassName('wrap')[0] // 通过类名获取节点
let lis = document.querySelectorAll('li') // 获取document或者某一容器下的所有节点
let divs = wrap.getElementsByTagName('div') // 通过标签名获取节点

然后给每一个li添加点击事件，进而实现动态切换功能，这里使用两种方式对逻辑代码进行处理（for()循环中都是使用var声明变量）

// 方式一
for (var i = 0; i < lis.length; i++) { // 使用var声明
    lis[i].idx = i  // 将每一个li对应的下标存起来
    lis[i].onclick = function() {
        for (var j = 0; j < lis.length; j++) {
            lis[j].className = ''
            divs[j].className = ''
        }
        lis[this.idx].className = 'eat'
        divs[this.idx].className = 'eat-detail'
    }
}

// 方式二
for (var i = 0; i < lis.length; i++) { // 使用var声明
    (function (i){
        lis[i].onclick = function() {
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = ''
                divs[j].className = ''
            }
            lis[i].className = 'eat'
            divs[i].className = 'eat-detail'
        }
    }(i))
}

学习了ES6后，其新增了let关键字，在进行for()循环时，let不仅将i绑定到for()循环块中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值
setTimeout()里面的func()属于一个新的作用域，通过var声明的变量是无法传入这个函数执行域中的，而通过let声明的变量，就能够作用于这个新的作用域，所以其中function()就能使用i这个变量了

// 方式三
for (let i = 0; i < lis.length; i++) { // 使用let声明
    lis[i].onclick = () => {
        for (let j = 0; j < lis.length; j++) {
            lis[j].className = ''
            divs[j].className = ''
        }
        lis[i].className = 'eat'
        divs[i].className = 'eat-detail'
    }
}

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul,
        li {
            list-style-type: none;
        }

        .wrap {
            height: 300px;
            width: 500px;
            border: 1px solid #D6D6D6;
            margin: 20px;
        }

        .wrap ul {
            width: 100%;
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #D6D6D6;
            display: flex;
            text-align: center;
        }

        .wrap li{
            flex: 1;
            cursor: pointer;
            border-right: 1px solid #D6D6D6
        }

        .wrap li:nth-child(3){
            border-right: none;
        }

        .eat{
            background-color: #5C7AE5;
            color: #FFFFFF;
        }

        .wrap div{
            display: none;
        }

        .wrap .eat-detail{
            display: block;
            text-align: center;
            padding: 109px 0;
            background-color: gray;
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul>
            <li class="eat">早饭</li>
            <li>中饭</li>
            <li>午饭</li>
        </ul>
        <div class="eat-detail">豆浆、青椒鸡蛋、宫保鸡丁</div>
        <div>米饭、麻辣羊肉、酸辣土豆丝</div>
        <div>鱼香肉丝、孜然羊肉</div>
    </div>
    <script>
        let wrap = document.getElementsByClassName('wrap')[0]
        let lis = document.querySelectorAll('li')
        let divs = wrap.getElementsByTagName('div')
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = () => {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = ''
                    divs[j].className = ''
                }
                lis[idx].className = 'eat'
                divs[idx].className = 'eat-detail'
            }
        }
    </script>
</body>

</html>