原生js——实现Tab选项卡切换效果——加入手动切换（汇总）

男孩子小杨

已于 2024-12-31 18:13:26 修改

阅读量995

点赞数 2

CC 4.0 BY-SA版权

分类专栏：原生js 文章标签： tab选项卡切换 tab自动切换 Tab手动切换 tab切换后的bug优化常见选项卡制作

于 2019-02-17 17:27:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43495629/article/details/87543835

该博客汇总了使用原生JavaScript实现Tab选项卡切换的效果，包括手动切换和自动切换。作者强调了函数封装的重要性，提到了将`mouseover`改为`onclick`来触发点击切换，并提醒注意`setTimeout`与`setInterval`的区别。同时，提供了避免数组遍历死循环的建议，以及在遇到问题时查看源码和注释的解决思路。此外，还链接了延迟切换和自动切换的具体实现教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js—实现Tab(tab)选项卡切换效果——加入手动切换（汇总）

注：这是对tab选项卡切换效果的一个总结；

1.Demo展示：

Alt

2 . Html布局：


	<div class="wrap">
		<div class="container-top" id="list">
			<ul>
				<li><a href="">论坛</a></li>
				<li><a href="">博客</a></li>
				<li><a href="">交流</a></li>
				<li><a href="">社区</a></li>
				<li><a href="">反馈</a></li>
			</ul>
		</div>
		<div class="container-bottom" id="item">
			<div class="con">
				<ul>
					<li><a href="#">论坛A</a></li>
					<li><a href="#">论坛B</a></li>
					<li><a href="#">论坛C</a>