前端如何实现选项卡效果？

凉凉心.

发布于 2025-10-13 15:56:17

1030

文章被收录于专栏：CSDN专栏CSDN专栏

选项卡的整体思路：做复杂的效果，往往都得在脑子里先把思路整理出来。

导航栏最简单的思路就是当鼠标点击按钮，内容区域跳转到点击按钮所代表的内容。这就是大致的思路，然后我们来编写一步步编写。

1、 html代码结构

要写效果肯定要有能够凸显效果的画面所以先把画面给写好了再慢慢理清逻辑问题；

因为导航栏不比轮播需要结构，所以在html的结构上未必要我这样做，但是在按钮和内容元素上必须需要一种联系，属性也好类也可以，必须让你知道你点了这个按钮他对应的内容是哪个！所以，这里在每个按钮上分别对应着各自的内容元素。

我这里创建了按钮的navContDiv属性，每个按钮的navContDiv属性值都对应各自的内容元素的id。

注：属性无所谓，只要你点击按钮时能够查出对应的内容元素就好。

2、 css的问题

导航栏的内容不像轮播的内容，他需要将内容重叠。这时候有人会直接改变display的none值，这是种方法，可是这样的处理方式会有很多的bug，例如在后期需求改了需要有一个淡入淡出的动画效果，那岂不是麻烦了？点按钮的速度快了，两个内容会并行在网页内。这种的方式是直观的但是也是死板的。

内容一：所以我在内容标签的父元素上给了相对定位，让内容元素相对于父元素，达到重叠的效果。但是这样有一个坏处，那就是在往后的布局中，不得不向父元素给予实际的高度！（图中忘加了，在内容标签的样式中需要加上transition这个过渡效果，时间自定义）
内容二：这里的按钮一是选中状态，所以我们向代表按钮二、三的内容元素隐藏。

这里使用的是visibility属性；需要知道的是visibility的值hidden跟display的值none，有什么区别。同样是在页面中看不见元素了，但是本质上两者是不相同的。
display的none值他会将元素彻底不可见，连元素所占的体积也消失了比如在这个元素中设置了宽高，用了none值那么宽高会被none值代替。这是display 的none值。
Visibility的hidden，它就不会像none值将元素的体积消除，它就像一面镜子，一面可见，一面不可见，通常元素都是可见的一面，hidden就是将元素翻了个面变成了不可见的一面。
与display：none最大的区别就是visibility：hidden将元素不可见后，元素的体积不会变还是在原来位置，只是不可见了而已。要说还有区别，就是visibility它支持过渡动画！

3、 javaScript部分

js的第一步，为按钮绑定上点击事件，并且还要达到一个选中的效果；

封装一个代表重置按钮的函数，在这个函数中对所有的按钮遍历，移除选中效果“on”类。
然后在点击事件中调用这个函数，紧接着在函数的下一行代码为点击到的元素添加上“on”这个选中效果的类，这样按钮部分就完成了。
js的第二步，将按钮指定的内容元素显示提前说明：本篇文章说明的切换内容是有动画的，所以会复杂点，不过也复杂不到哪里去。

由于我们已经在css中给内容元素加上了过渡动画所以这里我们这里直接改变visibility的值跟透明度的值就好了🆗。
跟上一步一样，封装一个重置所有内容的透明度函数；函数中遍历所有内容元素将每一个内容元素的visibility属性和opacity属性都设置为不可见的值。在点击事件中先调用这个重置函数，然后将点击到的元素的visibility属性和opacity属性都设置为可见。

技术点总结：这个效果最基本的就是找出点击元素所代表的内容，简单就简单在合理运用css后在js中设置几个值效果基本就实现了；两个函数封装都是重置内容和点击按钮的样式只不过点击按钮是用了on这个类进行代替，内容元素也可以跟点击按钮一样使用类代替。

源代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        .div1 {
            background-color: red;
        }

        .div2 {
            background-color: blue;
        }

        .div3 {
            background-color: green;
        }

        .nav_button {
            margin: 20px;
        }

        .nav_button>a {
            background-color: rgb(109, 109, 109);
            color: white;
            padding: 12px 30px;
            text-decoration: none;
            transition: all .3s;
        }

        .nav_button>a:hover,
        .nav_button>a.on {
            background-color: rgb(255, 138, 28);
        }

        .nav_table {
            position: relative;
        }

        .navDiv {
            position: absolute;
            width: 200px;
            height: 200px;
            transition: all .3s;
        }
    </style>
</head>

<body>

    <!-- 导航栏 —— 网页渲染内容 -->
    <div class="content">
        <!-- 导航按钮 -->
        <div class="nav_button">
            <a href="javascript:;" class="btn-one on" navContDiv="nav-one">按钮一</a>
            <a href="javascript:;" class="btn-two" navContDiv="nav-tow">按钮二</a>
            <a href="javascript:;" class="btn-three" navContDiv="nav-three">按钮三</a>
        </div>
        <!-- 内容区 -->
        <div class="nav_table">

            <!-- 1 -->
            <div class="div1 navDiv" id="nav-one" style="visibility: visible;"></div>

            <!-- 2 -->
            <div class="div2 navDiv" id="nav-tow" style="visibility: hidden;"></div>

            <!-- 3 -->
            <div class="div3 navDiv" id="nav-three" style="visibility: hidden;"></div>

        </div>
    </div>
    <!-- 导航栏 —— 网页渲染内容 -->

    <script src="./jquery-3.2.1.min.js"></script><!-- 引入jQuery库 -->
    <!-- 实际js代码编写的区域 -->
    <script>
        $(function () {
            var btn
            $(".nav_button>a[navContDiv]").click(function (e) {
                // 按钮点击
                btn = e.target;
                rest_on($(".nav_button>a[navContDiv]"))
                $(btn).addClass("on")

                // 切换内容
                rest_content($(".nav_table>.navDiv"))
                $("#"+$(btn).attr("navContDiv")+"").css({
                        "visibility":"visible",
                        "opacity": "1"
                    })
            })
            // 重置按钮"on"
            function rest_on(button) {
                for (var i = 0; i < button.length; i++) {
                    $(button[i]).removeClass("on")
                }
            }
            // 重置内容的透明度
            function rest_content(cont) {
                for (var i = 0; i < cont.length; i++) {
                    $(cont[i]).css({
                        "visibility":"hidden",
                        "opacity": "0"
                    })
                }
            }
        })
    </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-13，如有侵权请联系 cloudcommunity@tencent.com 删除

前端