js 选项卡|极客笔记

js 选项卡

在网页开发中，选项卡是一种常见的组件，用于展示多个内容页面，同时让用户可以方便地切换不同的页面内容。在本文中，我们将介绍如何使用JavaScript来实现一个简单的选项卡功能。

HTML 结构

首先，我们先来看一下HTML结构。假设我们有三个选项卡，分别是”Tab 1″、”Tab 2″和”Tab 3″，对应的内容分别是”Content 1″、”Content 2″和”Content 3″。

<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
    <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
    <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>

<div id="tab1" class="tabcontent">Content 1</div>
<div id="tab2" class="tabcontent">Content 2</div>
<div id="tab3" class="tabcontent">Content 3</div>

在这段HTML代码中，我们使用了tablinks和tabcontent类来区分选项卡按钮和对应内容。每个按钮都有一个onclick事件，当用户点击按钮时，会调用openTab函数并传入相应的参数。

CSS 样式

接下来，我们来定义一下CSS样式，让选项卡看起来更美观。

.tab {
    overflow: hidden;
}

.tab button {
    background-color: #f1f1f1;
    float: left;
    border: 1px solid #ccc;
    outline: none;
    cursor: pointer;
    padding: 10px;
    width: 33.33%;
}

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

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

.tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
}

.tabcontent.show {
    display: block;
}

在CSS样式中，我们主要定义了选项卡按钮和内容的样式，包括背景颜色、边框等。

JavaScript 功能实现

最关键的部分就是JavaScript代码了，我们需要实现选项卡按钮的点击切换功能。

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    // 隐藏所有选项卡内容
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // 移除所有按钮的激活状态
    tablinks = document.getElementsByClassName("tablinks");
    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";
}

// 默认显示第一个选项卡
document.getElementById("tab1").style.display = "block";
document.getElementsByClassName("tablinks")[0].className += " active";

在这段JavaScript代码中，openTab函数接受两个参数，分别是事件对象evt和选项卡名称tabName。在函数中，我们首先隐藏所有选项卡内容和移除所有按钮的激活状态，然后根据传入的选项卡名称显示相应的内容，并将按钮设为激活状态。