如何利用js实现选项卡效果（超简单）

夜深人静_

于 2020-04-02 01:46:30 发布

阅读量5.4k

点赞数 11

分类专栏：前端文章标签： js javascript 前端

版权

本文介绍了如何利用HTML、CSS和JavaScript实现简单的选项卡效果。通过基础布局和JavaScript动态切换，点击事件触发内容切换，也可调整为鼠标移入事件。核心在于JavaScript代码的事件处理和class名切换。

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

在开始写我们的选项卡之前，先来看一下最终实现的大概效果：
在这里插入图片描述
那废话不多说，接下来就看看如何去实现这个效果。

首先，利用我们的 html 和 css 基础，写出选项卡的基本布局：

<div class="news">
	<ul>
		<li class="active">标题1</li>
		<li>标题2</li>
		<li>标题3</li>
	</ul>
	<ol>
		<li class="active">内容1