html5 tab页切换效果，原生tab页切换

Step 1：创建HTML结构
首先，我们需要创建HTML结构来容纳Tab页和对应的内容。我们可以使用无序列表（<ul>）来创建标签页，使用<div>元素来容纳每个标签页对应的内容。
<ul class="tabs">
<li class="active">
<a rel="nofollow" href="#tab1">Tab 1</a></li>
<li>
<a rel="nofollow" href="#tab2">Tab 2</a></li>
<li>
<a rel="nofollow" href="#tab3">Tab 3</a>
</li>
</ul>


<div id="tab1" class="tab-content"><h3 id="h0">Content 1</h3><p>This is the content of Tab 1.</p></div><div id="tab2" class="tab-content"><h3 id="h1">Content 2</h3><p>This is the content of Tab 2.</p></div><div id="tab3" class="tab-content"><h3 id="h2">Content 3</h3><p>This is the content of Tab 3.</p></div>

在上述代码中，我们创建了一个包含三个标签页的无序列表，每个标签页都有一个对应的<div>元素作为内容容器。其中，第一个标签页以及对应的内容容器设置了class为active，表示默认显示的标签页。


Step 2：编写JavaScript代码 【vue3 放在 onmouted 中才能生效】最后，我们需要编写一些JavaScript代码来实现标签页的切换效果。我们可以使用事件监听器来监听标签页的点击事件，并在点击时切换显示对应的内容容器。

// 获取所有的标签页和内容容器
const tabs = document.querySelectorAll('.tabs li');
const tabContents = document.querySelectorAll('.tab-content'); // 遍历所有的标签页，并添加点击事件监听器
tabs.forEach((tab, index) => { tab.addEventListener('click', () => { // 移除所有标签页的active类和内容容器的active类
tabs.forEach(tab => tab.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active')); // 添加当前标签页的active类和对应的内容容器的active类
tab.classList.add('active');
tabContents[index].classList.add('active'); }); });

Step 3：设置CSS样式
接下来，我们需要设置CSS样式来实现Tab页的外观和交互效果。我们可以使用CSS选择器来选中对应的标签页和内容容器，并通过设置不同的样式来实现切换效果。

/* 标签页样式 */
ul.tabs { list-style-type: none; margin: 0; padding: 0; }
ul.tabs li { display: inline-block; margin-right: 10px; }
ul.tabs li a { display: block; padding: 10px; background-color: #f1f1f1; color: #333; text-decoration: none; }
ul.tabs li.active a { background-color: #333; color: #fff; } /* 内容容器样式 */
.tab-content { display: none; padding: 20px; }
.tab-content.active { display: block; }


在上述代码中，我们设置了标签页的样式和内容容器的样式。其中，.active选择器用于选中当前显示的标签页和内容容器，.active类的样式用于表示当前显示的标签页和内容容器。

https://blog.51cto.com/u_16175450/7133657?abTest=51cto&_refluxos=a10