html，css，原生js——实现Tab(tab)选项卡切换效果——自动切换

男孩子小杨

已于 2024-12-31 18:04:59 修改

阅读量3.3w

点赞数 3

分类专栏：原生js 文章标签： css选项卡切换选项卡自动切换计时器实现选项卡切换 tab选项卡切换 js实现选项卡切换

于 2019-02-14 14:22:18 首次发布

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

版权

本文详细介绍了如何利用HTML、CSS和原生JavaScript来创建Tab选项卡切换效果，并特别强调了自动切换功能的实现，通过设置计时器事件实现周期性切换。文中还提醒读者注意setTimeout和setInterval的区别，以及在封装函数和遍历数组时的注意事项，提供了两种不同的切换效果链接供参考。

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

html，css，原生js——实现Tab(tab)选项卡切换效果——自动切换

1.Demo展示：

计时器未生效：
计时器事件生效：

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>