Logo

菜单

发布于 2026-01-06 1 阅读
0

如何在 CSS 中创建选项卡。网站选项卡演示视频教程 - 让我们一起编码

如何在 CSS 中创建选项卡？网站的选项卡

演示

视频教程 -

让我们开始编程吧

您好，很高兴您能来。我是 Kunaal，今天我们将使用 CSS 和 JS 为网站创建标签页。您可以在下方看到演示。

演示

视频教程 -

如果您觉得这篇文章难以理解，或者需要更详细的解释，可以观看视频教程。

如果您喜欢这个视频教程，请考虑订阅我的YouTube频道。

让我们开始编程吧

创建三个文件index.html，style.css分别app.js编写基本的 HTML 结构和链接样式表。

之后在body标签内写入以下内容。

<div class="tabs">
        <span class="active"></span>
        <p class="tab">01</p>
        <p class="tab">02</p>
        <p class="tab">03</p>
        <p class="tab">04</p>
        <p class="tab">05</p>
    </div>

    <div class="content">
        <div class="page">
            <h1 class="title">tabs in css</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis. Eos suscipit dolorum consequuntur voluptatem veritatis reiciendis atque harum deleniti soluta, reprehenderit quos odit obcaecati sit, nulla eum, dolores sed hic exercitationem dicta qui laboriosam quisquam maxime! Aliquid ut reprehenderit quisquam vel ipsam quam architecto ad sunt, alias similique quod nesciunt modi non voluptatum soluta maiores hic debitis dolore quibusdam minus porro. Ex quae veritatis dignissimos reprehenderit voluptates fuga, minus voluptate repellendus facere doloremque doloribus, nisi quod soluta accusamus deleniti, delectus voluptas officia saepe dolore in. Sapiente ratione totam minima quam perferendis praesentium ad doloribus reiciendis. Blanditiis debitis eligendi officia amet accusantium sed pariatur quae rerum facere, repudiandae tempora distinctio aperiam cum itaque deserunt temporibus totam ducimus laudantium quia! Quasi ut perferendis aut provident harum in rerum praesentium consectetur! Ullam ex sit itaque nobis deserunt repellat delectus, voluptas in, distinctio neque molestias quibusdam, pariatur animi nam. Fugiat fuga aut hic sequi provident blanditiis, nesciunt, cumque harum ullam voluptas veniam magni? Et laboriosam voluptatum sapiente perspiciatis, culpa molestias commodi, architecto iure libero inventore voluptatibus non ut delectus fuga? Explicabo officiis excepturi totam distinctio quae, itaque veniam perferendis voluptatibus minima, natus quidem soluta pariatur ipsam iure, esse dolores ab reprehenderit laudantium harum?</p>
        </div>
        <div class="page">
            <h1 class="title">tabs 2</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis. Eos suscipit dolorum consequuntur voluptatem veritatis reiciendis atque harum deleniti soluta, reprehenderit quos odit obcaecati sit, nulla eum, dolores sed hic exercitationem dicta qui laboriosam quisquam maxime! Aliquid ut reprehenderit quisquam vel ipsam quam architecto ad sunt, alias similique quod nesciunt modi non voluptatum soluta maiores hic debitis dolore quibusdam minus porro. Ex quae veritatis dignissimos reprehenderit voluptates fuga, minus voluptate repellendus facere doloremque doloribus, nisi quod soluta accusamus deleniti, delectus voluptas officia saepe dolore in. Sapiente ratione totam minima quam perferendis praesentium ad doloribus reiciendis. Blanditiis debitis eligendi officia amet accusantium sed pariatur quae rerum facere, repudiandae tempora distinctio aperiam cum itaque deserunt temporibus totam ducimus laudantium quia! Quasi ut perferendis aut provident harum in rerum praesentium consectetur! Ullam ex sit itaque nobis deserunt repellat delectus, voluptas in, distinctio neque molestias quibusdam, pariatur animi nam. Fugiat fuga aut hic sequi provident blanditiis, nesciunt, cumque harum ullam voluptas veniam magni? Et laboriosam voluptatum sapiente perspiciatis, culpa molestias commodi, architecto iure libero inventore voluptatibus non ut delectus fuga? Explicabo officiis excepturi totam distinctio quae, itaque veniam perferendis voluptatibus minima, natus quidem soluta pariatur ipsam iure, esse dolores ab reprehenderit laudantium harum?</p>
        </div>
        <div class="page">
            <h1 class="title">tabs 3</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis. Eos suscipit dolorum consequuntur voluptatem veritatis reiciendis atque harum deleniti soluta, reprehenderit quos odit obcaecati sit, nulla eum, dolores sed hic exercitationem dicta qui laboriosam quisquam maxime! Aliquid ut reprehenderit quisquam vel ipsam quam architecto ad sunt, alias similique quod nesciunt modi non voluptatum soluta maiores hic debitis dolore quibusdam minus porro. Ex quae veritatis dignissimos reprehenderit voluptates fuga, minus voluptate repellendus facere doloremque doloribus, nisi quod soluta accusamus deleniti, delectus voluptas officia saepe dolore in. Sapiente ratione totam minima quam perferendis praesentium ad doloribus reiciendis. Blanditiis debitis eligendi officia amet accusantium sed pariatur quae rerum facere, repudiandae tempora distinctio aperiam cum itaque deserunt temporibus totam ducimus laudantium quia! Quasi ut perferendis aut provident harum in rerum praesentium consectetur! Ullam ex sit itaque nobis deserunt repellat delectus, voluptas in, distinctio neque molestias quibusdam, pariatur animi nam. Fugiat fuga aut hic sequi provident blanditiis, nesciunt, cumque harum ullam voluptas veniam magni? Et laboriosam voluptatum sapiente perspiciatis, culpa molestias commodi, architecto iure libero inventore voluptatibus non ut delectus fuga? Explicabo officiis excepturi totam distinctio quae, itaque veniam perferendis voluptatibus minima, natus quidem soluta pariatur ipsam iure, esse dolores ab reprehenderit laudantium harum?</p>
        </div>
        <div class="page">
            <h1 class="title">tabs 4</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis. Eos suscipit dolorum consequuntur voluptatem veritatis reiciendis atque harum deleniti soluta, reprehenderit quos odit obcaecati sit, nulla eum, dolores sed hic exercitationem dicta qui laboriosam quisquam maxime! Aliquid ut reprehenderit quisquam vel ipsam quam architecto ad sunt, alias similique quod nesciunt modi non voluptatum soluta maiores hic debitis dolore quibusdam minus porro. Ex quae veritatis dignissimos reprehenderit voluptates fuga, minus voluptate repellendus facere doloremque doloribus, nisi quod soluta accusamus deleniti, delectus voluptas officia saepe dolore in. Sapiente ratione totam minima quam perferendis praesentium ad doloribus reiciendis. Blanditiis debitis eligendi officia amet accusantium sed pariatur quae rerum facere, repudiandae tempora distinctio aperiam cum itaque deserunt temporibus totam ducimus laudantium quia! Quasi ut perferendis aut provident harum in rerum praesentium consectetur! Ullam ex sit itaque nobis deserunt repellat delectus, voluptas in, distinctio neque molestias quibusdam, pariatur animi nam. Fugiat fuga aut hic sequi provident blanditiis, nesciunt, cumque harum ullam voluptas veniam magni? Et laboriosam voluptatum sapiente perspiciatis, culpa molestias commodi, architecto iure libero inventore voluptatibus non ut delectus fuga? Explicabo officiis excepturi totam distinctio quae, itaque veniam perferendis voluptatibus minima, natus quidem soluta pariatur ipsam iure, esse dolores ab reprehenderit laudantium harum?</p>
        </div>
        <div class="page">
            <h1 class="title">like, share, subscribe</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis. Eos suscipit dolorum consequuntur voluptatem veritatis reiciendis atque harum deleniti soluta, reprehenderit quos odit obcaecati sit, nulla eum, dolores sed hic exercitationem dicta qui laboriosam quisquam maxime! Aliquid ut reprehenderit quisquam vel ipsam quam architecto ad sunt, alias similique quod nesciunt modi non voluptatum soluta maiores hic debitis dolore quibusdam minus porro. Ex quae veritatis dignissimos reprehenderit voluptates fuga, minus voluptate repellendus facere doloremque doloribus, nisi quod soluta accusamus deleniti, delectus voluptas officia saepe dolore in. Sapiente ratione totam minima quam perferendis praesentium ad doloribus reiciendis. Blanditiis debitis eligendi officia amet accusantium sed pariatur quae rerum facere, repudiandae tempora distinctio aperiam cum itaque deserunt temporibus totam ducimus laudantium quia! Quasi ut perferendis aut provident harum in rerum praesentium consectetur! Ullam ex sit itaque nobis deserunt repellat delectus, voluptas in, distinctio neque molestias quibusdam, pariatur animi nam. Fugiat fuga aut hic sequi provident blanditiis, nesciunt, cumque harum ullam voluptas veniam magni? Et laboriosam voluptatum sapiente perspiciatis, culpa molestias commodi, architecto iure libero inventore voluptatibus non ut delectus fuga? Explicabo officiis excepturi totam distinctio quae, itaque veniam perferendis voluptatibus minima, natus quidem soluta pariatur ipsam iure, esse dolores ab reprehenderit laudantium harum?</p>
        </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

CSS

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

body{
    width: 100%;
    font-family: 'roboto', sans-serif;
    overflow: hidden;
}

.tabs{
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    background: #232323;
    justify-content: center;
    align-items: center;
}

.tab{
    width: 20%;
    height: 100%;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    color: #b9b9b9;
    transition: .5s;
}

.tab:hover{
    background: #373737;
}

.tabs .active{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 60px;
    width: 20%;
    border-bottom: 4px solid #fff;
    transition: 1s;
}

.content{
    position: relative;
    width: 500vw;
    min-height: calc(100vh - 60px);
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(5, 100vw);
    transition: .5s;
}

.page{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(https://raw.githubusercontent.com/kunaal438/tabs-in-css/master/img/img1.jpeg);
    background-size: cover;
    background-position: center;
    padding: 50px;
}

.page:nth-child(2){
    background: url(https://raw.githubusercontent.com/kunaal438/tabs-in-css/master/img/img2.jpeg);
    background-size: cover;
}

.page:nth-child(3){
    background: url(https://raw.githubusercontent.com/kunaal438/tabs-in-css/master/img/img3.jpeg);
    background-size: cover;
}

.page:nth-child(4){
    background: url(https://raw.githubusercontent.com/kunaal438/tabs-in-css/master/img/img4.jpeg);
    background-size: cover;
}

.page:nth-child(5){
    background: url(https://raw.githubusercontent.com/kunaal438/tabs-in-css/master/img/img5.jpeg);
    background-size: cover;
}

.page::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #232323;
    opacity: .8;
}

.page .title,
.page hr,
.page p{
    position: relative;
    z-index: 2;
}

.title{
    color: #fff;
    text-transform: capitalize;
    font-size: 50px;
}

hr{
    margin: 20px 0;
}

.page p{
    color: #fff;
    font-weight: 300;
    margin-top: 40px;
    line-height: 25px;
}
Enter fullscreen mode Exit fullscreen mode

还有一些 JavaScript 代码。

const tabs = [...document.querySelectorAll('.tab')];
const pageContainer = document.querySelector('.content');
const activeSpan = document.querySelector('.tabs .active');

tabs.forEach((item, i) => {
    item.addEventListener('click', () => {
        pageContainer.style.marginLeft = `-${i * 100}%`;
        activeSpan.style.left = `${i * 20}%`;
    })
})
Enter fullscreen mode Exit fullscreen mode

希望你都理解了。如果你有任何疑问，或者发现我犯了任何错误，或者有任何建议，请随时在评论区留言。

如果你对编程感兴趣，想了解我这个15岁的少年是如何编写代码并设计出这些作品的，可以关注我的Instagram账号。我也计划在Instagram上分享我的游戏开发成果。

源代码、我的 YouTube 频道、Instagram

文章来源：https://dev.to/themodernweb/how-to-make-tabs-in-css-tabs-for-website-1bc4
致有抱负的软件开发人员：DEV 全...
你最近的工作/生活平衡状况如何？