选项卡页面

1) Add HTML

<div class="page-tabs">
    <button class="tablink" id="defaultOpen">页面1</button>
    <button class="tablink">页面2</button>
    <button class="tablink">页面3</button>
    <button class="tablink">页面4</button>

    <div class="tabcontent" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532430174269&di=20481d214cf8e3583729e87c8c7e981e&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2686023783%2C1351525809%26fm%3D214%26gp%3D0.jpg);">
        <h3>标题...</h3>
        <p>文本...文本...文本...文本...文本...</p>
    </div>

    <div class="tabcontent" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533025019&di=a63246e58c755136444890683215a448&imgtype=jpg&er=1&src=http%3A%2F%2F2e.zol-img.com.cn%2Fproduct%2F120%2F848%2FcePtmYavpbmvI.jpg);">
        <h3>标题...</h3>
        <p>文本...文本...文本...文本...文本...</p>
    </div>

    <div class="tabcontent" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532430298538&di=644d39af4a3e669628b5f90976a8daa4&imgtype=0&src=http%3A%2F%2Fpic72.huitu.com%2Fres%2F20160511%2F870501_20160511205449030377_1.jpg);">
        <h3>标题...</h3>
        <p>文本...文本...文本...文本...文本...</p>
    </div>

    <div class="tabcontent" style="background-image: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2777634307,2705625607&fm=27&gp=0.jpg);
">
        <h3>标题...</h3>
        <p>文本...文本...文本...文本...文本...</p>
    </div>
</div>

2) Add CSS

        .page-tabs {
            width: 600px;
        }

        .tablink {
            background-color: #555;
            color: white;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            font-size: 17px;
            width: 25%;
        }

        .tablink:hover {
            background-color: #777;
        }

        .tabcontent {
            color: white;
            display: none;
            padding: 100px 20px;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

3) Add jQuery

    $(".tablink").click(
        function () {
            // 清除所有标签按钮的背景颜色
            var tablinks = $(".tablink");
            for (i = 0; i < tablinks.length; i++) {
                tablinks.eq(i).css("background-color", "");
            }
            // 添加当前点击的标签按钮颜色
            $(this).css("background-color", "red");
            // 隐藏所有内容页面
            var tabcontent = $(".tabcontent");
            for (var i = 0; i < tabcontent.length; i++) {
                tabcontent.eq(i).css("display", "none")
            }
            // 显示标签对应的内容页面
            var tabindex = $(this).index();
            var pageindex = $(".tabcontent").eq(tabindex);
            pageindex.css("display", "block")
        }
    )
    // 触发点击事件
    $("#defaultOpen").click();