JavaScript如何实现选项卡功能

那维莱特

于 2023-11-11 09:49:22 发布

阅读量291

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_60504665/article/details/134344626

版权

我来说一下怎么用js来实现选项卡功能。首先，核心思路是用排他思想，所谓排他思想就是让你想要变化的所有元素（包括自己）和样式都都为空，这样说可能不好理解，举个例子：
有五个按钮，我想让每点击一个按钮，这个按钮就会变成红色，代码可以这样写

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

<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>

    </style>
</head>

<body>
    <button>变色</button>
    <button>变色</button>
    <button>变色</button>
    <button>变色</button>
    <button>变色</button>
    <script>
        let btn = document.getElementsByTagName('button');
        //btn是一个伪数组，可以遍历
        for (let i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                this.style.backgroundColor = 'red';
            }
        }
    </script>
</body>

</html>

但是如果你运行的话就会发现，你只能让按钮变色，但是当你点击第二个第三个等等按钮的时候，你会发现它们都会变成红色，如下图：

当你点击后：

但这样肯定不是我们想要的效果，这里我们就要使用排他思想，在我们按下按钮时先做一件事情，让所有按钮先去掉自己的backgroundcolor，让其为空，这样不管怎么按，他只会有一个按钮变色，代码我们这么写：

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

<head>
    <meta charset="UTF-8">
    
    <title>选项卡</title>
    <style>

    </style>
</head>

<body>
    <button>变色</button>
    <button>变色</button>
    <button>变色</button>
    <button>变色</button>
    <button>变色</button>
    <script>
        let btn = document.getElementsByTagName('button');
        //btn是一个伪数组，可以遍历
        for (let i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                for (let i = 0; i < btn.length; i++) {//点击按钮的时候先把所有按钮背景颜色清除
                    btn[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'red';
            }
        }
    </script>
</body>

</html>

大家感兴趣的可以去试试。
学会了排他思想，我们就可以继续我们的选项卡话题了，选项卡也是一样的道理，你们先看代码，后面再给你们详细解释：

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

<head>
    <meta charset="UTF-8">
  
    <title>选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">选项一</li>
                <li>选项二</li>
                <li>选项三</li>
                <li>选项四</li>
                <li>选项五</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                选项一内容
            </div>
            <div class="item">
                选项二内容
            </div>
            <div class="item">
                选项三内容
            </div>
            <div class="item">
                选项四内容
            </div>
            <div class="item">
                选项五内容
            </div>

        </div>
    </div>
    <script>
        let li = document.querySelector('.tab_list').querySelectorAll('li');//获取li元素
        let items = document.querySelectorAll('.item');//获取内容元素
        for (let i = 0; i < li.length; i++) {//for循环绑定单击事件
            li[i].setAttribute('index', i);//给每个li添加索引号
            li[i].onclick = function () {
                //排他思想
                for (let i = 0; i < li.length; i++) {
                    li[i].className = '';//设置所有li没有样式
                }
                this.className = 'current';//鼠标点击当前li改变
                let index = this.getAttribute('index');//获取点击元素的索引
                for (let i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }

    </script>
</body>

</html>

效果如下：

运行效果：

这里我们首先分成两大步，第一步先获取元素，我就不多说了。第二步注册事件和处理程序。
首先我们这里有五个li，获取过来的li元素是以伪数组的形式输出的，所以我们可以用for循环来遍历这个伪数组为每个li添加单击事件，接下来就是写函数了，这里就要用到上面所讲的排他思想，试想我们每点击一次li都像是点击上面的按钮一样，我们用for循环去掉他的样式，然后再给当前点击的li加上样式，这样的话，所点击的li就会有红色背景和白色的字了，但是下面的内容还是不变的。接下来就是内容部分了，因为我们每点击一次li，我们的浏览器并不知道们点击的是哪一个li，这时候就可以给每一个li自定义一个属性index，也就是添加了一个索引号，用到了setAttribute(‘属性名’,值);这时候会有人问，为什么值是i呢，因为上面获取元素所得到的li是一个伪数组，用i遍历，所以当你点击第一个li时，索引号肯定是0，以此类推，然后我们下面可以接收index，以判断你点击的是哪个li，返回所对应的内容。最后一步我们用for循环遍历内容区域，如果所对应的索引号相同则显示对应内容，否则隐藏。

那维莱特

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript如何实现选项卡功能

首先我们这里有五个li，获取过来的li元素是以伪数组的形式输出的，所以我们可以用for循环来遍历这个伪数组为每个li添加单击事件，接下来就是写函数了，这里就要用到上面所讲的排他思想，试想我们每点击一次li都像是点击上面的按钮一样，我们用for循环去掉他的样式，然后再给当前点击的li加上样式，这样的话，所点击的li就会有红色背景和白色的字了，但是下面的内容还是不变的。这里我们首先分成两大步，第一步先获取元素，我就不多说了。有五个按钮，我想让每点击一个按钮，这个按钮就会变成红色，代码可以这样写。
复制链接

扫一扫