前端tab栏切换/选项卡的实现（JS原生+jQuery两种方法实现）

IlPoppylI

已于 2022-03-07 12:10:28 修改

阅读量3k

点赞数 3

文章标签： windows 前端 javascript

于 2022-03-03 19:00:33 首次发布

本文链接：https://blog.csdn.net/ilpoppyli/article/details/121801441

版权

前端tab栏切换/选项卡的实现

1.预期效果

    效果描述：当鼠标选择不同的tab标签时，会显示出不同的展示内容

2.代码实现（JS原生）

<!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>Document</title>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }
        .fitting {
   
            height: 500px;
            width: 800px;
            margin: 100px auto;
        }
        .fitting .tab_main {
   
            height: 40px;
            width: 800px;
            background-color: #f7f7f7;
            border-bottom: 1px solid #e4393c;
            list-style: none;
        }
        .fitting .tab_main li {
   
            float: left;
            padding: 10px 25px;
        }
        .fitting .tab_main .first {
   
            color: white;
            font-weight: 500;
            background-color: #e4393c;    
        }
        .fitting .tab_con {
   
            height: 460px;
            width: 800px;
            background-color: #f7b9ba63;
        }
        .fitting .tab_con .detail {
   
            display: none;
        }
        .fitting .tab_con .first {
   
            display: block;
        }
        .select {
   
            color: white;
            font-weight