沃梦达 / 编程技术 / 前端开发 / 正文

div css 实现tabs标签的思路及示例代码

前端开发
2024-01-04

让我来为你详细讲解如何使用div和CSS实现tabs标签。

让我来为你详细讲解如何使用div和CSS实现tabs标签。

一、思路

假设我们需要实现一个tabs标签，首先需要以下几步：

  1. 将标签划分为两部分：内容区和导航区；
  2. 内容区包含全部标签页的内容，导航区用于切换标签页；
  3. 导航区的每个按钮都有一个相对应的标签页，点击导航区的某个按钮可以显示对应的标签页；
  4. 显示的标签页需要隐藏其他标签页，以显示当前标签页的内容。

基于以上思路，我们可以实现一个简单的tabs标签。

二、示例代码

以下代码实现了一个带有三个标签页的tabs标签，点击导航区的按钮可以切换标签页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tabs标签页</title>
    <style>
        /*定义标签页的样式*/
        .tabs {
            width: 800px;
            margin: 50px auto;
            background-color: #f5f5f5;
            padding: 10px;
            border: 1px solid #ccc;
        }

        /*定义导航区的样式*/
        .tabs-nav {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
        }

        /*定义导航按钮的样式*/
        .tabs-nav li {
            margin: 0 10px;
            padding: 5px;
            cursor: pointer;
            font-weight: bold;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        /*定义标签页内容区的样式*/
        .tabs-content div {
            display: none; /*默认情况下内容区域不显示*/
            padding: 10px;
            line-height: 1.6;
        }

        /*定义选中标签页的样式*/
        .tabs-nav li.active {
            background-color: #ccc;
        }

        /*定义选中标签页对应子内容的样式*/
        .tabs-content div.active {
            display: block; /*选中标签页的子内容显示*/
            background-color: #fff;
            border: 1px solid #ccc;
            border-top: none;
            border-radius: 0 5px 5px 5px;
        }
    </style>
</head>
<body>
    <div class="tabs">
        <ul class="tabs-nav">
            <li class="active">标签1</li>
            <li>标签2</li>
            <li>标签3</li>
        </ul>
        <div class="tabs-content">
            <div class="active">标签1的内容...</div>
            <div>标签2的内容...</div>
            <div>标签3的内容...</div>
        </div>
    </div>

    <!-- 导航按钮的点击事件 -->
    <script>
        var tabs = document.querySelector(".tabs");
        var nav = tabs.querySelectorAll(".tabs-nav li");
        var content = tabs.querySelectorAll(".tabs-content div");

        for (var i = 0; i < nav.length; i++) {

            nav[i].onclick = function(){
                // 切换导航按钮样式
                for (var j = 0; j < nav.length; j++) {
                    nav[j].classList.remove("active");
                }
                this.classList.add("active");

                // 切换内容区域样式
                for (var k = 0; k < content.length; k++) {
                    content[k].classList.remove("active");
                }
                var index = this.getAttribute("data-index");
                content[index].classList.add("active");
            }

            // 给每个导航按钮添加自定义属性 data-index
            nav[i].setAttribute("data-index",i);
        }

    </script>
</body>
</html>

在上述代码中，我们首先定义了整个tabs标签的样式，分别为导航区、导航按钮、标签页内容区和选中标签页。在HTML中，我们将导航区和标签页内容区分别用ul和div实现，并将标签页内容区中的每个标签页都包裹在一个div中。

接着，我们通过JavaScript代码实现了导航按钮的点击事件。点击某个导航按钮后，切换该按钮的样式以及对应的标签页的样式。

三、示例说明

以上示例实现了一个比较简单的tabs标签，下面再提供两个更加复杂的使用示例：

示例1：基于bootstrap的tabs标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tabs标签页</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <style>
        /*自定义标签页*/
        .tabs .nav-link {
            color: #333;
            background-color: #f5f5f5;
            border: none;
            border-radius: 0;
        }

        /*选中标签页*/
        .tabs .nav-link.active {
            background-color: #fff;
            color: #333;
            border: none;
            border-bottom-color: #fff;
        }

        /*标签页内容区*/
        .tabs .tab-pane {
            padding: 10px;
            background-color: #fff;
            border-top: none;
            border: 1px solid #ccc;
            border-radius: 0 0 5px 5px;
        }

        /*选中标签页内容区*/
        .tabs .tab-pane.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>基于bootstrap的Tabs标签页</h2>
        <div class="col-md-8 mx-auto">
            <ul class="nav nav-tabs tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#tab1">标签1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tab2">标签2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tab3">标签3</a>
                </li>
            </ul>
            <div class="tab-content tabs">
                <div class="tab-pane fade show active" id="tab1">标签1的内容...</div>
                <div class="tab-pane fade" id="tab2">标签2的内容...</div>
                <div class="tab-pane fade" id="tab3">标签3的内容...</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在以上示例中，我们使用了Bootstrap提供的tabs组件来实现标签页，通过自定义样式来达到我们想要的效果。

示例2：响应式Tabs标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>响应式Tabs标签页</title>
    <style>
        body {
            font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
            background-color: #fff;
            margin: 0;
        }
        .tabs {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .tabs li {
            float: left;
            margin-right: 10px;
            padding: 5px 10px;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            border-bottom: none;
            cursor: pointer;
        }
        .tabs li.active {
            background-color: #fff;
            border-bottom: 1px solid #ccc;
        }
        .tabs-content div {
            display: none;
            padding: 10px;
            border: 1px solid #ccc;
            border-top: none;
            clear: both;
            background-color: #fff;
        }
        .tabs-content div.active {
            display: block;
        }
        @media (max-width: 767px) { /*小屏幕设备样式*/
            .tabs li {
                display: block;
                float: none;
                margin: 0;
                border-bottom: 1px solid #ccc;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>响应式Tabs标签页</h2>
        <div class="col-md-8 mx-auto">
            <ul class="tabs">
                <li class="active">标签1</li>
                <li>标签2</li>
                <li>标签3</li>
            </ul>
            <div class="tabs-content">
                <div class="active">标签1的内容...</div>
                <div>标签2的内容...</div>
                <div>标签3的内容...</div>
            </div>
        </div>
    </div>
    <script>
        var tabs = document.querySelector(".tabs");
        var nav = tabs.querySelectorAll("li");
        var content = tabs.querySelectorAll(".tabs-content div");

        for (var i = 0; i < nav.length; i++) {
            nav[i].onclick = function(){
                for (var j = 0; j < nav.length; j++) {
                    nav[j].classList.remove("active");
                }
                this.classList.add("active");
                for (var k = 0; k < content.length; k++) {
                    content[k].classList.remove("active");
                }
                var index = this.getAttribute("data-index");
                content[index].classList.add("active");
            }
            nav[i].setAttribute("data-index",i);
        }
    </script>
</body>
</html>

该示例实现了一个响应式tabs标签，当浏览器窗口大小变化时导航区的样式会发生变化，使得在小屏幕设备上也可以正常显示。

本文标题为：div css 实现tabs标签的思路及示例代码

上一篇： vue electron实现无边框窗口示例详解
下一篇： Javascript 实现复制（Copy）动作方法大全

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2