前端小案例——选项卡（HTML+CSS+JS, 附源码）

花花´◡`

已于 2024-05-24 09:36:09 修改

阅读量1.5k

点赞数 16

分类专栏： web 文章标签：前端 html css javascript

于 2024-01-24 12:19:34 首次发布

本文链接：https://blog.csdn.net/2202_75550100/article/details/135817817

版权

web 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文介绍了如何在HTML和JavaScript中创建一个可切换的选项卡功能，通过点击按钮隐藏和显示不同内容区域，同时展示了CSS样式的应用和事件监听器的使用。

摘要由CSDN通过智能技术生成

一、前言

实现功能：

切换选项卡内容：点击不同的选项卡按钮时，会隐藏之前显示的选项卡内容，并显示当前点击按钮对应的选项卡内容。

实现逻辑：

在 HTML 中创建了两个ul盒子，分别用于显示选项卡按钮和选项卡内容。
默认显示第一个选项卡内容，即将第一个选项卡内容的 display 属性设置为 block。
通过 forEach 循环遍历选项卡按钮，给每个按钮添加点击事件监听器，当点击某个按钮时，隐藏之前显示的选项卡内容，然后显示当前点击按钮对应的选项卡内容。
给选项卡按钮添加样式，使其在被选中时呈现不同的效果。

二、项目运行效果

三、全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
        background-repeat: no-repeat;
    }
    .choice-box{
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 700px;
        height: 500px;
        margin: 5% auto;
    }
    .choice{
        float: left;
        width: 14%;
        height: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-around;
    }
    .choice li a{
        display: block;
        width: 100%;
        height: 100%;
        font-size: 22px;
        color: #000;
        transition: all 0.2s linear;
        cursor: pointer;
    }
    .choice-con{
        position: relative;
        width: 80%;
        height: 100%;
    }
    .choice-con li{
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        border-radius: 5%;
    }
    .choice-con li p{
        line-height: 500px;
        text-align: center;
        font-size: 28px;
        color: #fff;
    }
</style>
<body>
    <div class="choice-box">
        <ul class="choice">
            <li>
                <a class="choice-1">粉色</a>
            </li>
            <li>
                <a class="choice-2">绿色</a>            
            </li>
            <li>
                <a class="choice-3">蓝色</a>
            </li>
            <li>
                <a class="choice-4">紫色</a>
            </li>
            <li>
                <a class="choice-5">红色</a>
            </li>
            <li>
                <a class="choice-6">黑色</a>
            </li>
        </ul>

        <ul class="choice-con">
            <!-- 下面li标签可以添加自己的内容和样式 -->
            <li id="choice-1" style="background-color: pink">
                <p>我是粉色！</p>
            </li>
            <li id="choice-2" style="background-color: aquamarine;">
                <p>我是绿色！</p>
            </li>
            <li id="choice-3" style="background-color: #859aff;">
                <p>我是蓝色！</p>
            </li>
            <li id="choice-4" style="background-color: blueviolet;">
                <p>我是紫色！</p>
            </li>
            <li id="choice-5" style="background-color: tomato;">
                <p>我是红色！</p>
            </li>
            <li id="choice-6" style="background-color: #000;">
                <p>我是黑色！</p>
            </li>
        </ul>
    </div>
</body>
<script>
    let choice1 = document.querySelector('#choice-1');
    choice1.style.display = 'block';

    const choice = document.querySelector('.choice');
    let choiceLis = choice.querySelectorAll('li');
    choiceLis.forEach(function (li) {
        li.addEventListener('click', function () {
            if (choice1) {
                choice1.style.display = 'none';
            }
            let aHref = this.querySelector('a').getAttribute('class');
            let contID = aHref.slice(0);
            let contDIv = document.getElementById(contID);
            choice1 = contDIv;
            contDIv.style.display = 'block';
        })
    })

    let choiceAs = document.querySelectorAll('.choice a');
    console.log(choiceAs);
    choiceAs.forEach(function (a, index) {
        a.addEventListener('click', function () {
            choiceAs.forEach(function (link) {
                link.style.fontSize = '';
                link.style.letterSpacing ='';
            });
            this.style.fontSize = '35px';
            this.style.letterSpacing ='10px';
        });
        // 判断是否是第一个 <a> 标签
        if (index === 0) { 
            a.style.fontSize = '35px';
            a.style.letterSpacing ='10px';
        }
    });
</script>
</html>