js实现简单选项卡制作

下面是详细的 js 实现简单选项卡制作攻略：

选项卡制作的实现原理

选项卡是一种可以切换不同内容的功能组件，一般实现选项卡的方式主要是通过CSS控制各个选项卡的显示和隐藏，并通过JS实现点击切换选项卡的功能。大致的实现过程如下：

选项卡的标题切换: 点击不同的标题，显示对应的内容。一般使用事件委托的方式来绑定点击事件。
选项卡内容的显示和隐藏：通过CSS控制各个选项卡内容的display属性来控制显示和隐藏。

实现步骤

HTML结构

在 HTML 结构中需要定义选项卡的标题和内容部分。一般情况下会将它们放到一个容器元素中，例如<div class="tab-container">:

<div class="tab-container">
    <ul class="tab-nav">
        <li class="active">Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
    <div class="tab-content">
        <div class="active">Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

tab-nav是选项卡标题的容器，tab-content则是选项卡内容的容器，active表示选项卡当前处于激活状态。在默认情况下，第一个选项卡以及对应的内容处于激活状态。

CSS样式

通过CSS样式来控制选项卡的布局和样式，使得选项卡更易于使用和调整。

.tab-container {
    overflow: hidden;
    position: relative;
}

.tab-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-nav li {
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}

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

.tab-content > div {
    display: none;
    padding: 20px;
}

.tab-content > div.active {
    display: block;
}

JS代码

选项卡标题切换：通过事件委托绑定点击事件。

// 获取选项卡标题元素
const tabNav = document.querySelector('.tab-nav');

// 绑定点击事件
tabNav.addEventListener('click', e => {
    // 获取被点击的选项卡标题元素
    const target = e.target;

    if (target.tagName === 'LI') {
        // 清除所有选项卡标题的激活状态
        const tabNavItems = document.querySelectorAll('.tab-nav li');
        tabNavItems.forEach(item => {
            item.classList.remove('active');
        });

        // 设置被点击的选项卡标题为激活状态
        target.classList.add('active');

        // 切换选项卡内容
        changeTab(target.dataset.index);
    }
});

这段代码首先获取了所有的选项卡标题元素，通过事件委托的方式绑定点击事件。这里通过判断事件源元素是否为选项卡标题元素（即li），从而确定是否执行具体的点击事件。在点击事件中，首先清除所有选项卡标题元素的激活状态，然后将被点击的选项卡标题元素设置为激活状态。最后调用changeTab函数切换选项卡内容。

选项卡内容的切换: 根据选项卡标题的索引值获取对应的选项卡内容并设置为激活状态。

function changeTab(index) {
    // 获取所有选项卡内容元素
    const tabContents = document.querySelectorAll('.tab-content > div');

    // 清除所有选项卡内容的激活状态
    tabContents.forEach(content => {
        content.classList.remove('active');
    });

    // 设置对应的选项卡内容为激活状态
    const targetTabContent = tabContents[index];
    targetTabContent.classList.add('active');
}

这段代码通过changeTab函数完成对选项卡内容的切换。首先获取所有选项卡内容元素，然后清除它们的激活状态。接着获取被点击的选项卡标题对应的索引值，用于获取对应的选项卡内容并将其设置为激活状态。

示例说明

以下是两个关于选项卡实现的示例说明：

示例一

在这个例子中，我们展现了一个选项卡的布局样式，包括选项卡标题和对应的内容。

<div class="tab-container">
    <ul class="tab-nav">
        <li class="active" data-index="0">Tab 1</li>
        <li data-index="1">Tab 2</li>
        <li data-index="2">Tab 3</li>
    </ul>
    <div class="tab-content">
        <div class="active">Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

.tab-container {
    overflow: hidden;
    position: relative;
}

.tab-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-nav li {
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}

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

.tab-content > div {
    display: none;
    padding: 20px;
}

.tab-content > div.active {
    display: block;
}

// 获取选项卡标题元素
const tabNav = document.querySelector('.tab-nav');

// 绑定点击事件
tabNav.addEventListener('click', e => {
    // 获取被点击的选项卡标题元素
    const target = e.target;

    if (target.tagName === 'LI') {
        // 清除所有选项卡标题的激活状态
        const tabNavItems = document.querySelectorAll('.tab-nav li');
        tabNavItems.forEach(item => {
            item.classList.remove('active');
        });

        // 设置被点击的选项卡标题为激活状态
        target.classList.add('active');

        // 切换选项卡内容
        changeTab(target.dataset.index);
    }
});

function changeTab(index) {
    // 获取所有选项卡内容元素
    const tabContents = document.querySelectorAll('.tab-content > div');

    // 清除所有选项卡内容的激活状态
    tabContents.forEach(content => {
        content.classList.remove('active');
    });

    // 设置对应的选项卡内容为激活状态
    const targetTabContent = tabContents[index];
    targetTabContent.classList.add('active');
}

示例二

下面是项目中选项卡的实现，选项卡内容是项目进度的不同阶段。

<div class="tab-container">
    <ul class="tab-nav">
        <li class="active" data-index="0">阶段一</li>
        <li data-index="1">阶段二</li>
        <li data-index="2">阶段三</li>
        <li data-index="3">阶段四</li>
        <li data-index="4">阶段五</li>
    </ul>
    <div class="tab-content">
        <div class="active">
            <h5>组队申请</h5>
            <p>参加活动的战友们首先需要组队申请</p>
        </div>
        <div>
            <h5>项目策划</h5>
            <p>完成阶段一后，您可以开始进行项目策划</p>
        </div>
        <div>
            <h5>形象设计</h5>
            <p>设计专家将会根据您的特点来为您量身打造设计方案 </p>
        </div>
        <div>
            <h5>产品研发</h5>
            <p>经验丰富的研发团队将会为您成功开发产品 ，并不断优化</p>
        </div>
        <div>
            <h5>售后服务</h5>
            <p>您在使用过程中遇到任何问题，我们将在第一时间内进行为您解决</p>
        </div>
    </div>
</div>

.tab-container {
    overflow: hidden;
    position: relative;
}

.tab-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
}

.tab-nav li {
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
}

.tab-nav li.active {
    border-bottom: 3px solid #0099ff;
}

.tab-content > div {
    display: none;
    padding: 20px;
}

.tab-content > div.active {
    display: block;
    padding-top: 0;
}

// 获取选项卡标题元素
const tabNav = document.querySelector('.tab-nav');

// 绑定点击事件
tabNav.addEventListener('click', e => {
    // 获取被点击的选项卡标题元素
    const target = e.target;

    if (target.tagName === 'LI') {
        // 清除所有选项卡标题的激活状态
        const tabNavItems = document.querySelectorAll('.tab-nav li');
        tabNavItems.forEach(item => {
            item.classList.remove('active');
        });

        // 设置被点击的选项卡标题为激活状态
        target.classList.add('active');

        // 切换选项卡内容
        changeTab(target.dataset.index);
    }
});

function changeTab(index) {
    // 获取所有选项卡内容元素
    const tabContents = document.querySelectorAll('.tab-content > div');

    // 清除所有选项卡内容的激活状态
    tabContents.forEach(content => {
        content.classList.remove('active');
    });

    // 设置对应的选项卡内容为激活状态
    const targetTabContent = tabContents[index];
    targetTabContent.classList.add('active');
}

这个选项卡的应用比较广泛，我们可以用于主页的各个导航页面的展示。用户可以通过选项卡简单直观地了解各个项目的具体情况。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现简单选项卡制作 - Python技术站