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

原创

已于 2024-12-31 18:13:26 修改 · 1k 阅读

收录于

当前文章被以下社区和专栏收录：

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

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

原生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>