用多种方法实现tab标签切换

最新推荐文章于 2023-07-07 16:38:06 发布

磊磊磊磊磊子啊

最新推荐文章于 2023-07-07 16:38:06 发布

阅读量5.3k

点赞数

分类专栏： web前端基础知识文章标签： tab标签切换 web前端

本文链接：https://blog.csdn.net/zsl_955200/article/details/53521431

版权

本文介绍了作者在面试中遇到的tab标签切换问题，并在之后研究了三种实现方法：纯CSS、原生JS和JQuery。尽管样式简洁，但成功实现了功能。欢迎交流不同的实现思路。

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

在开始之前先谈谈局外话，最近正在找工作，发现好多公司都要求在某某上面有文章发表，一次文章都没发过的我顿时感觉好尴尬，忙里偷闲发表点文章，毕竟第一次发，还有很多很多需要学习的地方，技术方面还有欠缺，望前辈们多多指点迷津！
昨天去面试，面试官让我手写一段代码实现tab标签的切换，因为家里有事，辞职了一个月，一个月都没写代码了，手生了不少，我竟然没写出来，今天我研究了一下，用了三种方法实现这种效果，分别是纯CSS，原生JS和JQuery。大家可以参考下，样式写的比较简单，只是实现了想要的效果，有不同想法的欢迎来吐槽
1、纯CSS的写法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                display: inline-block;
                width: 100%;
            }
            a:hover{
                color: #fff;
            }
            ul{
                width: 100%;
                border-bottom: 2px solid red;
                overflow: hidden;
            }
            li{
                float: left;
                text-align: center;
                width: 22%;
                list-style: none;
                margin: 0 5px;
                cursor: pointer;
                line-height: 30px;
            }
            li:hover{
                border-top-left-radius: 7px;
                border-top-right-radius: 7px;
                background-color: red;
                color: #fff;
            }
            div.box{
                margin-top: 10px;
                width: 100%;
                height: 200px;

最低0.47元/天解锁文章

磊磊磊磊磊子啊

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
用多种方法实现tab标签切换

在开始之前先谈谈局外话，最近正在找工作，发现好多公司都要求在某某上面有文章发表，一次文章都没发过的我感觉好尴尬，忙里偷闲发表点文章，毕竟第一次发，望前辈们嘴下留情！昨天去面试，面试官让我手写一段代码实现tab标签的切换，因为家里有事，辞职了一个月，一个月都没写代码了，手生了不少，我竟然没写出来，今天我研究了一下，用了三种方法实现这种效果，分别是纯CSS，原生JS，JQuery1，纯CSS的写法
复制链接

扫一扫

专栏目录