Tab切换栏

qq_45245438 2020-01-03 11:10:12

添加什么代码能够让tab栏自动切换。

...全文

211 2 打赏收藏举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

战丿魂 2021-05-03

打赏
举报

回复

添加个定时器

测试狂人 2021-04-27

打赏
举报

回复

解决了吗？过了这么久没有结帖，别浪费啊！

案例：tab 栏切换（重点案例）业务需求：当鼠标点击上面相应的选项卡（tab），下面内容跟随变化。案例分析：（1）Tab 栏切换有2个大的模块。（2）上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想），修改类名的方式。（3）下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。（4）规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。（5）核心思路：给上面的 tab_list 里面的所有小 li 添加自定义属性，属性值从0开始编号。（6

tab栏切换制作是我们web开发中一个十分常见的案例，今天在这里写写，希望对大家有所帮助，还是要用到我们上节写到的排他思想！好好学哦！

我们这里使用的是：document.querySelectorAll，因为要我们直接获取全部的a标签，所以我们写这个会更好，然后我们需要遍历这个a，运用到for循环。然后我们如果选择第一个，那么我们第二个就不会显示出来，所以我们选择第一个的时候得干掉第二个，这时候我们就可以使用这行代码。这是我今天从学习的知识点，今天试着做了一个tab栏切换，学到很多的知识点，讲师也比学校的老师讲的更加详细明白。这里的意思是我们每选择一个那么我们就会增加一个元素，而前面经过后就会消除掉。

tab栏：点击不同的标签，显示不同的内容，被点击的标签样式发生改变（突出选中的是哪一个）实现思路：将tab栏分为上下两部分，上面是导航列表，下面是各部分对应的内容。把标签和内容都写出来，内容按照标签顺序依次顺着写，给标签都添加自定义属性- - -index，属性值从0开始，依次增加1 首先实现上面的效果，点击后样式切换，被点击的字体颜色、背景颜色改变等: ①css定义一个类eg：current，里面定义改变后的样式，先给第一个标签写一个该类名，其他的不写类名， ②js获取所有标签元素对象，- - -f

JS的排他思想及tab栏切换,利用数组，循环，自定义属性，通过标签名字选择等

87,984

社区成员

224,681

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章