老师，用了flex布局以后，使用tab选项卡切换的时候，就用不了diplay:none了，盒子里的内容会变形，那么JQ如何实现切换呢？

<ul class="tab flex spaceAround paddingT20">

                                        <li class="active">改造比率</li>

                                        <li>正常运行率</li>

                                        <li>故障及时处置率</li>

                                    </ul>

                                    <ul class="tab-switch heightA">

                                        <li class="heightA widthA">

                                            <div class="tabCon flex alignC spaceBetween heightA">

                                                <div class="chartBox heightA flexF marginR">

                                                    <div id="chart1" style="width: 100%;height: 100%;"></div>

                                                </div>

                                                <div class="rankingBox flex column spaceAround heightA">

                                                    <p>1</p>

                                                    <p>2</p>

                                                    <p>3</p>

                                                    <p>4</p>

                                                    <p>5</p>

                                                    <p>6</p>

                                                    <p>7</p>

                                                    <p>8</p>

                                                    <p>9</p>

                                                    <p>10</p>

                                                    <p>11</p>

                                                    <p>12</p>

                                                </div>

                                            </div>

                                        </li>

                                        <li class="heightA widthA" >

                                            <div class="tabCon flex alignC spaceBetween heightA">

                                                <div class="chartBox heightA flexF marginR">

                                                    <div id="chart1b" style="width: 100%;height: 100%;"></div>

                                                </div>

                                                <div class="rankingBox flex column spaceAround heightA">

                                                    <p>1</p>

                                                    <p>2</p>

                                                    <p>3</p>

                                                    <p>4</p>

                                                    <p>5</p>

                                                    <p>6</p>

                                                    <p>7</p>

                                                    <p>8</p>

                                                    <p>9</p>

                                                    <p>10</p>

                                                    <p>11</p>

                                                    <p>12</p>

                                                </div>

                                            </div>

                                        </li>

                                        <li class="heightA widthA" >

                                            <div class="tabCon flex alignC spaceBetween heightA">

                                                <div class="chartBox heightA flexF marginR">

                                                    <div id="chart1c" style="width: 100%;height: 100%;"></div>

                                                </div>

                                                <div class="rankingBox flex column spaceAround heightA">

                                                    <p>1</p>

                                                    <p>2</p>

                                                    <p>3</p>

                                                    <p>4</p>

                                                    <p>5</p>

                                                    <p>6</p>

                                                    <p>7</p>

                                                    <p>8</p>

                                                    <p>9</p>

                                                    <p>10</p>

                                                    <p>11</p>

                                                    <p>12</p>

                                                </div>

                                            </div>

                                        </li>

$(function() {

    $(".tab li").each(function() {

        var index = $(this).index();

        // 初始化

        $(".tab li").eq(0).addClass("active");

        $(this).click(function() {

            // 点击某个元素时，给这个元素添加active类，其余兄弟元素的active类都取消

            $(this).addClass("active").siblings().removeClass("active");

            $(".tab-switch li").eq(index).stop(true).show().siblings().stop(true).hide();

        });

    })

})