阅读:1248回复:0
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 |
|