web前端之选项卡的实现、动态添加类名、动态移除类名、动态添加样式、激活、间距、tabBar

原生(一)

效果图

html
代码

<div class="card">
    <div class="tab_bar">
        <div class="item" onclick="handleTabBar(this)">tabBar1</div>
        <div class="item" onclick="handleTabBar(this)">tabBar2</div>
        <div class="item" onclick="handleTabBar(this)">tabBar3</div>
    </div>

    <div class="content">
        <div class="item">
            <h2>Tab1</h2>
            <p>Content for Tab 1.</p>
        </div>
        <div class="item">
            <h2>Tab2</h2>
            <p>Content for Tab 2.</p>
        </div>
        <div class="item">
            <h2>Tab3</h2>
            <p>Content for Tab 3.</p>
        </div>
    </div>
</div>

解析

style
代码

.card {
    padding: 8px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0px 0px 2px 2px #fafad2;
    border-radius: 4px;

    .tab_bar {
        display: flex;
        padding-bottom: 8px;
        box-sizing: border-box;
        border-bottom: 1px solid #e1e1e1;

        .item {
            padding: 4px 8px;
            box-sizing: border-box;
            cursor: pointer;
        }

        .item:not(:first-child) {
            margin-left: 6px;
        }

        .active {
            position: relative;
            color: #409eff;
            transition: color 0.3s ease;
        }

        .active::after {
            content: '';
            position: absolute;
            width: 68%;
            height: 3px;
            left: 50%;
            bottom: -2px;
            transform: translateX(-50%);
            background-color: #409eff;
            border-radius: 2px;
        }
    }

    .content {
        margin-top: 8px;

        .item {
            display: none;

            h2 {
                margin: 0;
            }

            p {
                margin: 0;
                margin-top: 4px;
            }
        }
    }
}

解析

JavaScript
代码

runInit();

function handleTabBar(e) {
    const itemElTabBar = document.querySelectorAll('.tab_bar .item');
    const itemElContent = document.querySelectorAll('.content .item');

    itemElTabBar.forEach((item, i) => {
        if (item === e) {
            e.classList.add('active');
            itemElContent[i].style.display = 'block';
        } else {
            item.classList.remove('active');
            itemElContent[i].style.display = 'none';
        }
    });
}

function runInit() {
    const itemElTabBar = document.querySelectorAll('.tab_bar .item');
    const itemElContent = document.querySelectorAll('.content .item');

    itemElTabBar[0].classList.add('active');
    itemElContent[0].style.display = 'block';
}

解析

原生(二)

效果图

heml

<div class="box">
    <div class="back_img"></div>
    <ul class="list">
        <li class="item">
            <img class="active" src="../../image/2_.jpg" alt="">
        </li>
        <li class="item">
            <img src="../../image/5_.jpg" alt="">
        </li>
        <li class="item">
            <img src="../../image/10_.jpg" alt="">
        </li>
        <li class="item">
            <img src="../../image/3_.jpg" alt="">
        </li>
        <li class="item">
            <img src="../../image/1_.jpg" alt="">
        </li>
    </ul>
</div>

style

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, pink, skyblue);

    .box {
        width: 680px;

        .back_img {
            height: 500px;
            background-image: url('../../image/2_.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-shadow: 0px 0px 1px 2px rgba(255, 165, 0, 1);
            border-radius: 4px;
            transition: all 1s;
        }

        .list {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 18px;
            list-style: none;
            gap: 16px;

            .item {
                flex: 1;
                height: 118px;

                img {
                    width: 100%;
                    height: 100%;
                    box-shadow: 0px 0px 1px 2px rgba(68, 68, 68, 0.4);
                    border-radius: 4px;
                    cursor: pointer;
                }

                img.active {
                    box-shadow: 0px 0px 1px 2px rgba(255, 165, 0, 1);
                }
            }
        }
    }
}

JavaScript

runInit();

function runInit() {
    const backImg = document.querySelector('.back_img');
    const elList = document.querySelectorAll('.item > img');
    let isClick = true;

    elList.forEach(item => {
        item.onclick = ({ target }) => {
            if (isClick) {
                backImg.style.backgroundImage = `url(${target.src})`;
                elList.forEach(items => items.classList.remove('active'));
                target.classList.add('active');
                isClick = false;
                setTimeout(() => isClick = true, 1000 * 1);
            }
        };
    });
}

vue(一)

html

<div class="tab_bar">
  <div
    :class="{
      item: true,
      active: item.id === activeTabBar ? true : false
    }"
    v-for="item in tabBarList"
    :key="item.id"
    @click="handleTabBar(item)"
  >
    {{ item.title }}
  </div>
</div>

style

.tab_bar {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #a8a8a8;

  .item {
    position: relative;
    padding: 8px;
    cursor: pointer;
  }

  .item:not(:first-child) {
    margin-left: 8px;
  }

  .active {
    position: relative;
    color: #409eff;
    transition: color 0.5s ease;
  }

  .active::after {
    content: '';
    position: absolute;
    width: 58%;
    height: 3px;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    background-color: #409eff;
  }
}

JavaScript

export default {
  name: 'tabBar',
  data() {
    return {
      activeTabBar: 1,
      tabBarList: [
        { id: 1, title: '正在开班' },
        { id: 2, title: '已结束班级' },
        { id: 3, title: '全部班级' }
      ]
    };
  },
  methods: {
    handleTabBar(row = {}) {
      this.activeTabBar = row.id;
    }
  }
};