JS：tab栏class封装（可不看）

<style type="text/css">
        div,
        span,
        ul,
        li,
        h2,
        body {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .all {
            width: 440px;
            border: 1px solid #000;
            padding: 10px;
            margin: 80px auto;
        }

        .all h2 {
            height: 30px;
            text-align: center;
            display: flex;
            justify-content: space-between;
        }

        .all h2 span {
            width: 100px;
            height: 30px;
            background: #CCC;
            text-align: center;
            cursor: pointer;
        }

        .all h2 span.current {
            background: #FF3366;
        }

        .all ul li {
            display: none;
            background: #FF3366;
            height: 200px;
        }

        .all ul li.current {
            display: block
        }
    </style>

    <div id="tab1" class="all">
        <h2>
            <span class="current">新闻</span>
            <span>娱乐</span>
            <span>游戏</span>
            <span>财经</span>
        </h2>
        <ul>
            <li class="current">新闻</li>
            <li>娱乐</li>
            <li>游戏</li>
            <li>财经</li>
        </ul>
    </div>
    <div id="tab2" class="all">
        <h2>
            <span class="current">张三</span>
            <span>李四</span>
            <span>申五</span>
            <span>其他</span>
        </h2>
        <ul>
            <li class="current">张三</li>
            <li>李四</li>
            <li>申五</li>
            <li>其他</li>
        </ul>