css3 标签页跳转页面

CSS3标签页具有更多的样式选择和更丰富的交互性。其中，标签页跳转页面是一个非常常见的实现方式。我们可以使用HTML和CSS3来创建标签页，同时使用JavaScript来实现标签页之间的切换。

/* CSS3标签页样式 */.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
.tab-header li {
    list-style: none;
    margin-right: 10px;
    cursor: pointer;
}
.tab-content {
    display: none;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
}
.tab-content.active {
    display: block;
}
    

我们可以在HTML中创建标签页，如下所示：

div class="tab-container">
    ul class="tab-header">
    li onclick="openTab(event, 'tab1')">
    标签页1/li>
    li onclick="openTab(event, 'tab2')">
    标签页2/li>
    li onclick="openTab(event, 'tab3')">
    标签页3/li>
    /ul>
    div id="tab1" class="tab-content active">
    p>
    这是标签页1的内容/p>
    /div>
    div id="tab2" class="tab-content">
    p>
    这是标签页2的内容/p>
    /div>
    div id="tab3" class="tab-content">
    p>
    这是标签页3的内容/p>
    /div>
    /div>

我们使用JavaScript来实现标签页之间的切换，代码如下所示：

function openTab(evt, tabName) {
    var i, tabContent, tabLinks;
    tabContent = document.getElementsByClassName("tab-content");
    for (i = 0;
     i  tabContent.length;
 i++) {
    tabContent[i].style.display = "none";
}
    tabLinks = document.getElementsByClassName("tab-header");
    for (i = 0;
     i  tabLinks.length;
 i++) {
    tabLinks[i].className = tabLinks[i].className.replace(" active", "");
}
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}
    

这是一个简单的标签页跳转实现，您可以根据自己的需求进行定制化。希望这篇文章能帮助您更好地理解CSS3标签页的实现方式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！