能套用的tab栏切换

效果:

在style.js文件里封装了一个Show函数，有4个参数，di（当前点击的按钮），num（按钮个数，也可以说是下面具体内容个数），divn(一个id前缀，这个例子里是ta，)，active（当前按钮的类名，可控制不同于其他按钮的个性样式），

按钮有不同id，第一个叫ta0，第二个ta1...，鼠标划入时触发Show函数，传入不同的参数，js文件里先获取到当前按钮，给他加上个性类名active（current），再获取下面的对应内容区域，给他显示，接下来就要处理那些鼠标没划入，这里用一个for循环和判断解决，“di！=i”，确保剔除掉当前按钮和内容，其他的就去掉个性类名current和内容不显示了。（可以实现多个按钮切换，也可同理编写点击事件）。

转载于:https://www.cnblogs.com/xlj-code/p/5683041.html

能套用的tab栏切换相关推荐

微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习
tab栏切换 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
WebAPI(part7)--Tab栏切换案例
学习笔记,仅供参考,有错必究 Web API Tab栏切换案例代码 <!DOCTYPE html> <html lang="en"><head> ...
apiCloud + aui实现tab栏切换功能
本人apiCloud新手一枚,在学习的过程中,发现aui是一个非常好用的ui框架,我在作apiCloud项目时,最常用的就是aui框架.同时,发现sui也挺好,这两种框架可以同时在项目中混用,但是不能 ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
vant/vue——tab栏切换上下箭头功能实现
有的tab栏需要点击两次从而达到排序的功能下面是实现双重tab栏切换功能 css样式 .active {color: red; } .black{color: black; } 标签部分 <u ...
1~22（面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换）
1 面向对象编程介绍 1.1 两大编程思想面向过程面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...

能套用的tab栏切换

能套用的tab栏切换相关推荐

最新文章

热门文章