开发者社区> 前端王睿> 正文

如何用原生JS写Tab切换

简介: 1. 基本思路 ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 2.
+关注继续查看

1. 基本思路

① 遍历Tab选项
② 然后给每个Tab选项绑定点击事件
③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式

2. 具体代码实现

<!--HTML-->
<div id="tab">
    <!--Tab选项-->
    <div class="tab-nav">
        <a href="javascript:;" class="cur">选项1</a>
        <a href="javascript:;">选项2</a>
        <a href="javascript:;">选项3</a>
    </div>
    <!--Tab选项内容-->
    <div class="tab-content">
        <div class="content content1 cur">选项内容1</div>
        <div class="content content2">选项内容2</div>
        <div class="content content3">选项内容3</div>
    </div>
</div>
/*CSS*/
#tab{ width: 300px; margin: 30px auto;}
.tab-nav{ display: flex;}
.tab-nav a{ flex: 1; line-height: 40px; border: 1px solid #000; text-align: center; text-decoration: none; color: #000;}
.tab-nav a.cur{ color: #fff; background: #000;}
.content{ display: none; width: 100%; height: 300px; color: #fff; box-sizing: border-box; padding: 10px;}
.content.cur{ display: block;}
.content1{ background: #f00; }
.content2{ background: #0f0;}
.content3{ background: #00f;}
//Javascript
window.onload = function () {
    var oTab = document.getElementById('tab');
    var aTabNav = oTab.querySelectorAll('.tab-nav a');
    var aTabContent = oTab.querySelectorAll('.tab-content .content');
    for(var i = 0; i < aTabNav.length; i++){   // 遍历Tab选项
        aTabNav[i].onclick = (function (i) {   // Tab选项绑定点击事件
            return function () {
                // 清除所有Tab选项的标记样式
                for(var j = 0; j < aTabNav.length; j++){
                    aTabNav[j].classList.remove('cur');
                }
                aTabNav[i].classList.add('cur');
                // 清除所有Tab选项内容的显示样式
                for(j = 0; j < aTabContent.length; j++){
                    aTabContent[j].classList.remove('cur');
                }
                aTabContent[i].classList.add('cur');
            }
        })(i);
    }
};

以上JS还可以继续优化,将相同功能的代码封装成函数:

window.onload = function () {
    var oTab = document.getElementById('tab');
    var aTabNav = oTab.querySelectorAll('.tab-nav a');
    var aTabContent = oTab.querySelectorAll('.tab-content .content');
    for(var i = 0; i < aTabNav.length; i++){
        aTabNav[i].onclick = (function (i) {
            return function () {
                addCurClass(aTabNav,i);
                addCurClass(aTabContent,i);
            }
        })(i);
    }
};

function addCurClass(obj,index) {
    for(var i = 0; i < obj.length; i++){
        obj[i].classList.remove('cur');
    }
    obj[index].classList.add('cur');
}

代码没有什么难度,非常基础,但是需要注意的一点是,在获取当前点击项的索引时,我们需要使用到闭包

相关推荐

教你两招用纯CSS写Tab切换
纯CSS制作单页Web应用
使用hash制作单页Web应用

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
小程序自定义底部导航栏,切换不同页面显示不同tabBar
小程序自定义底部导航栏,切换不同页面显示不同tabBar
1184 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
9107 0
如何用原生JS写Tab切换
1. 基本思路 ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 2.
2527 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19750 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18016 0
Qt之Tab键切换焦点顺序
简介 Qt的窗口部件按用户的习惯来处理键盘焦点。也就是说,其出发点是用户的焦点能定向到任何一个窗口,或者窗口中任何一个部件。 焦点获取方式比较多,例如:鼠标点击、Tab键切换、快捷键、鼠标滚轮等。 习惯性的,我们经常会使用Tab键来控制焦点顺序,比如:用户注册时,个人信息输入框焦点的切换、执行按钮焦点的切换等。 在添加部件之后,默认情况下,Tab键也是可以切换焦点的,
1286 0
+关注
前端王睿
3年Web前端开发工程师,目前就职于上海知名媒体&mdash;&mdash;新闻晨报,个人公众号:前端微站
65
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载