JavaScript如何实现 选项卡功能

简介: JavaScript如何实现 选项卡功能

我来说一下怎么用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循环遍历内容区域,如果所对应的索引号相同则显示对应内容,否则隐藏。

相关文章
|
8天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
8天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
2月前
|
JavaScript 前端开发
js制作九宫格抽奖功能
js制作九宫格抽奖功能
21 0
|
3月前
|
JavaScript 前端开发
|
7天前
|
JavaScript 前端开发
如何用JS实现选项卡功能
如何用JS实现选项卡功能
10 0
|
8天前
|
存储 前端开发 JavaScript
使用JavaScript实现复杂功能——一个交互式音乐播放器
使用JavaScript实现复杂功能——一个交互式音乐播放器
|
8天前
|
存储 JavaScript 前端开发
JavaScript复杂功能实现:实时数据可视化图表
JavaScript复杂功能实现:实时数据可视化图表
|
28天前
|
JavaScript 前端开发
购物车的功能——JS源码
购物车的功能——JS源码
14 2
|
2月前
|
前端开发 JavaScript 开发者
Canvas库 fabric.js可以实现哪些功能? 动图介绍
fabric.js是一个canvas库,今天整理了一下fabric.js可以实现的功能,用动图的形式分享给大家,方便快速了解fabric.js。
Canvas库 fabric.js可以实现哪些功能? 动图介绍