tab的切换卡

最新推荐文章于 2023-02-11 11:28:40 发布

是小叶的呢.

最新推荐文章于 2023-02-11 11:28:40 发布

阅读量1.2k

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_55108422/article/details/113652722

版权

本文介绍了如何使用HTML、CSS和JavaScript实现tab切换效果。首先展示HTML布局，然后通过CSS设置样式。接着用JavaScript添加点击事件，利用for循环和setAttribute()添加类，并通过removeAttribute()移除类以实现切换。此外，通过自定义属性index配合JavaScript操作DOM，实现内容与tab的同步切换。

摘要由CSDN通过智能技术生成

首先，让我们来看一下HTML布局如下：
< div class=“tab”>

	<ul id="nav">
		<li class="on" index="1">nav-1</li>
		<li index="2">nav-2</li>
		<li index="3">nav-3</li>
	</ul>
	<div class="showbox" id="imgbox">
		<img src="../photo/04.jpg" alt="">
		<img src="../photo/02.jpg" alt="" style="display: none;">
		<img src="../photo/05.jpg" alt="" style="display: none;">
	</div>
</div>

CSS样式，见截图：