js + css实现标签内容切换功能(实例讲解)

先附上效果图和代码： html 文档： &lt;!DOCTYPE html> &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; [removed][removed] [removed] [removed] = function main() { Tabs(".list-item", ".contents", "list-item-check 在本文中，我们将深入探讨如何使用JavaScript和CSS实现一个标签内容切换的功能。这个功能常见于网页设计中，用于展示不同的内容区域，用户可以通过点击不同标签来切换显示的内容。以下是对给定实例的详细分析和解释。 HTML部分定义了两个主要的结构：一个包含标签的`<ul>`列表（`#list-title`）和一个内容容器`<div>`（`#content-box`）。每个`<li>`标签元素具有`class="list-item"`，并且初始状态下第一个元素带有`list-item-checked`类，表示它是默认选中的。内容容器中包含多个`<div>`元素，每个都具有`class="contents"`，其中第一个元素带有`contents-checked`类，表示它是可见的。 CSS部分定义了样式，包括标签和内容容器的布局、尺寸、颜色、边框等。`list-item-checked`和`contents-checked`类分别用于改变选中状态下的标签和内容容器的样式，如背景色和可见性。`contents`的初始状态是不可见的（`opacity: 0`和`visibility: hidden`），但在选中状态下，通过CSS的过渡效果（`transition`）平滑地变为可见。 JavaScript部分，我们引入了一个名为`tabs_function.js`的外部文件，该文件中定义了一个名为`Tabs`的函数。此函数接收四个参数： 1. `tabs_name`：触发事件的标签的类名（在这个例子中是`.list-item`）。 2. `contents_name`：内容容器的类名（`.contents`）。 3. `tabs_checked_style`：标签选中状态时的样式类（`.list-item-checked`）。 4. `contents_checked_style`：内容容器选中状态时的样式类（`.contents-checked`）。 `Tabs`函数首先获取所有匹配`tabs_name`和`contents_name`的DOM元素。然后，为每个标签元素添加点击事件监听器。当用户点击一个标签时，函数会移除所有标签和内容容器的选中样式，并将新选中的标签和相应内容容器添加相应的选中样式。`classList.toggle()`方法用于切换元素的类名。 通过这种方式，我们可以实现一个简洁而有效的标签内容切换功能，用户交互流畅，视觉效果良好。此功能可以灵活应用于各种网页项目，只需根据实际需求调整CSS样式和HTML结构，以及可能需要修改的JavaScript逻辑。