js选项卡

点击的时候给他一个active类名，让其显示（display：block），默认不显示（display：none）

<!-- 选项卡导航 -->
<div class="container2">
    <div class="content-text">
        <p class="text-title">我们的产品</p>
        <p class="text-word">以创新思维和技术·为客户创造价值</p>
    </div>
    <div class="container2">
        <div class="tab_nav">
            <ul>
                <li class="active">
                    <span class="iconfont1"><img src="../static/img/资金交易软件产品.png" alt=""></span>
                    <span>资金交易软件产品</span>
                </li>
                <li>
                    <span class="iconfont2"><img src="../static/img/量化平台.png" alt=""></span>
                    <span>量化平台及报价交易一体化</span>
                </li>
                <li>
                    <span class="iconfont3"><img src="../static/img/资金风险.png" alt=""></span>
                    <span>资金风险管理软件产品</span>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 选项卡正文 -->
<div class="tab_box">

    <!-- 第一个tab内容 -->

    <!-- 放背景图 -->
    <div class="tab_item tab_item_active">
        <!-- 箭头 -->
        <div class="tab_item_jiantou jiantou1"></div>
        <!-- 放内容 -->
        <div class="container2">
            <div class="tab_content">
                <ul>
                    <li>
                        <a href="#">
                            <p>X-FUNDS代客资金交易平台</p>
                            <p>为金融机构的代客资金业务建立一套前中后一体化的交易管理系统。</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>X-PAD综合理财销售平台</p>
                            <p>是集结构性存款、理财、基金代销、贵金属、保险等多业务于一体，集中式业务处理平台。</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>ITS投资交易平台</p>
                            <p>投资交易平台是高实时高频度处理客户交易与保证金估值的系统。</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>XPADAU代理个人黄金业务交易管理系统</p>
                            <p>上海黄金交易所递延产品的交易系统，提供手机、PC专业客户端等交易渠道。</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>GIS贵金属积利金系统</p>
                            <p>实现了贵金属的定投、认购、赎回、生息、实物兑换等功能，支持扩展多种贵金属产品。</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>X-PADG实物贵金属销售系统</p>
                            <p>为金融机构提供一款符合销售需求、功能丰富、操作简单的实物贵金属进、销、退、存销售和管理的系统。</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>CBONDS柜台债券业务系统</p>
                            <p>面向银行等金融机构提供柜台债券业务销售解决方案，具有功能完善、债券种类齐全、交易品种齐全等特点。</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>结构性存款管理系统</p>
                            <p>为结构性存款各业务条线建设一套专业统一的结构性存款系统，实现结构性存款业务的全流程集中式管理。</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>汇利榜APP</p>
                            <p>是一款集模拟交易，交易大赛，培训教学，实时资讯等服务为一体的外汇、投资交流平台。</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 第二个tab内容 -->

    <!-- 放背景图 -->
    <div class="tab_item">
        <!-- 箭头 -->
        <div class="tab_item_jiantou jiantou2"></div>
        <!-- 放内容 -->
        <div class="container2">
            <div class="tab_content">
                <ul>
                    <li>
                        <a href="#">
                            <p>QTS量化交易系统</p>
                            <p>为金融机构建设资金业务价格和交易中心，实现对同业、企业等资金报价和交易的集中管理。</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>X-PRICE报价引擎系统</p>
                            <p>是金融机构的价格管理中心，主要为各金融机构的总分、分部、对公、对私、同业客户提供报价服务。</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>EMMS做市商系统</p>
                            <p>是发布做市商交易价格、处理交易对手询价、管理交易成交的系统，由报价管理和交易管理组成。</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 第三个tab内容 -->

    <!-- 放背景图 -->
    <div class="tab_item">
        <!-- 箭头 -->
        <div class="tab_item_jiantou jiantou2"></div>
        <!-- 放内容 -->
        <div class="container2">
            <div class="tab_content">
                <ul>
                    <li>
                        <a href="#">
                            <p>RCS资金风险管理系统</p>
                            <p>服务于金融机构总部进行资金业务管理，通过前台交易、中台风控、后线资金结算三大模块满足各职能岗位的工作需要。</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

.content-text p {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.content-text p.text-title {
    font-size: 1.28rem;
    line-height: 2.41rem;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #394957;
    margin-bottom: 0.1rem;
}

.content-text p.text-word {
    font-size: 0.16rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #677785;
    line-height: 1.24rem;
}

.tab_nav {
    margin-top: 2rem;
}

.tab_nav ul {
    display: flex;
    justify-content: space-between;
}

.container2 .tab_nav ul li {
    width: 16rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1rem;
    color: #727171;
    cursor: pointer;
    background-color: rgb(252, 195, 195);
}

.container2 .tab_nav .active {
    background-color: #0080BC;
    border-radius: 13px;
    text-align: center;
    color: #fff;
}

.tab_nav ul li:nth-child(1) {
    text-align: left
}

.tab_nav ul li:nth-child(2) {
    text-align: center
}

.tab_nav ul li:nth-child(3) {
    text-align: right
}

.tab_nav ul li span img {
    width: 1.5rem;
    vertical-align: middle;
}

.tab_box {
    margin-top: 2rem;
    background: url(../static/img/products-bg.png) center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* width: 1000rem; */
    /* background-color: rgb(107, 72, 72); */
}

.tab_box .tab_item {
    position: relative;
    display: none;
}

.tab_box .tab_item_active {
    display: block;
    cursor: pointer;
}

.tab_box .tab_item .tab_item_jiantou {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 1rem solid transparent;
    border-radius: 0.09rem;
    border-bottom-color: #0080BC;
}

.tab_box .tab_item .jiantou1 {
    top: -1.6rem;
    left: 7rem;
}

.tab_box .tab_item .jiantou2 {
    top: -1.6rem;
    left: 26rem;
}

.tab_box .tab_item .jiantou3 {
    top: -1.6rem;
    left: 46rem;
}

.tab_box .tab_item .container2 .tab_content ul {
    display: flex;
    /* justify-content: center; */
    flex-wrap: wrap;
    padding: 1rem 0;
}

.tab_box .tab_item .container2 .tab_content ul li {
    width: 16rem;
    height: 7rem;
    margin: 0.5rem 1.1rem 1.1rem;
}

.tab_box .tab_item .container2 .tab_content ul li p:nth-of-type(1) {
    width: 100%;
    min-height: 0.54rem;
    font-size: 0.8rem;
    line-height: 3.29rem;
    position: relative;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.tab_box .tab_item .container2 .tab_content ul li p:nth-of-type(2) {
    width: 15rem;
    height: 8.48rem;
    font-size: 0.16rem;
    line-height: 1.24rem;
    font-weight: 400;
    margin-top: 0.3rem;
    color: #fff;
}

// 选项卡
let tabNav = document.getElementsByClassName('tab_nav');
let lis = tabNav[0].getElementsByTagName('li');
let tabItems = document.getElementsByClassName('tab_item');
console.log(tabItems);
console.log(lis);
for (let i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].onclick = function() {
        for (let j = 0; j < lis.length; j++) {
            lis[j].className = '';
            tabItems[j].style.display = "none";
        }
        this.className = "active";
        tabItems[lis[i].index].style.display = "block";
    }
}