html5 页签切换

原创

mob649e81693c66 2024-05-03 07:43:04 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81693c66的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML5 页签切换教程

一、整体流程

下面是实现“HTML5 页签切换”的详细步骤表格：

步骤	操作
1	创建 HTML 结构
2	设计 CSS 样式
3	编写 JavaScript 代码

gantt
    title HTML5 页签切换流程
    section 创建HTML结构
    设计HTML结构            :done, a1, 2022-01-01, 1d
    section 设计CSS样式
    设计页签样式            :done, a2, after a1, 1d
    section 编写JavaScript代码
    编写页签切换逻辑        :active, a3, after a2, 2d

二、具体步骤

1. 创建 HTML 结构

在 HTML 文件中添加以下结构：

<div class="tab">
    <button class="tablink" onclick="openTab('tab1')">Tab 1</button>
    <button class="tablink" onclick="openTab('tab2')">Tab 2</button>
    <button class="tablink" onclick="openTab('tab3')">Tab 3</button>
    
    <div id="tab1" class="tabcontent">Content 1</div>
    <div id="tab2" class="tabcontent">Content 2</div>
    <div id="tab3" class="tabcontent">Content 3</div>
</div>

2. 设计 CSS 样式

在 CSS 文件中添加以下样式：

.tab {
    overflow: hidden;
}

.tab button {
    background-color: #f1f1f1;
    float: left;
}

.tab button:hover {
    background-color: #ccc;
}

.tabcontent {
    display: none;
}

3. 编写 JavaScript 代码

在 JavaScript 文件中添加以下代码：

function openTab(tabName) {
    var i;
    var tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    
    var tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    
    document.getElementById(tabName).style.display = "block";
    event.currentTarget.className += " active";
}