tab栏切换原理

本文是我学习tab栏切换时的笔记,步骤很详细。比较适用于JavaScript初学者

创新互联建站主营广平网站建设的网络公司,主营网站建设方案,成都App定制开发,广平h5小程序制作搭建,广平网站营销推广欢迎广平等地区企业咨询

1.基础 - 排他思想

如图,点击任意一个按钮,当前按钮应该显示橘色,其他显示默认颜色灰色。

代码运行步骤:

利用for循环遍历5个按钮;

选中的按钮进行 onclick 事件时,首先删除所有按钮的类名,使其全部显示灰色(34行);

然后给当前点击的按钮添加指定类名,使其显示橘色(37行)。

tab栏切换原理

示例代码:



 
 
 tab栏切换效果
 
 
 
 
 

2.tab栏切换

如图:在排他思想的基础上,五个按钮底下添加五个新盒子,并用一个大盒子将按钮和底下的盒子包裹。

底下的盒子全部隐藏,默认只显示第一个。

tab栏切换原理

新增步骤:

为btns[i]添加自定义属性index,用来关联下面的大盒子(42行);

点击按钮后先让底下的盒子全部隐藏(54行);

然后给当前所点击按钮相关联的盒子添加指定属性(57行)。

示例代码:



 
 
 tab栏切换效果
 
 
 
 
 
1
2
3
4
5

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持创新互联!


网站栏目:tab栏切换原理
分享链接:http://csruizhi.cn/article/pihosd.html

其他资讯

Copyright © 2007-2024 成都优众联杰科技有限公司 All Rights Reserved 蜀ICP备2024116266号
友情链接: 成都企业网站制作 成都商城网站建设 成都网站制作 成都网站建设 成都定制网站建设 成都网站设计 成都网站制作 手机网站建设 宜宾网站设计 网站设计 手机网站建设套餐 成都模版网站建设 温江网站设计 成都网站设计 成都网站设计 高端定制网站设计 定制级高端网站建设 响应式网站建设 H5网站制作 成都网站建设 重庆电商网站建设 成都网站建设