每天一个小知识点学习记录---分别在html页面和vue页面中实现tab切换

1.在html页面中实现tab切换

<ul class="tab-box" id="tab-box3">
                    <li class="actived">111</li>
                    <li>222</li>
                    <li>333</li>
                    <li>444</li>
                </ul>
                <div id="tab-content3">
                    <div class="list-box">
                        <div class="table-head">
                            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                                <colgroup>
                                    <col width="40">
                                    <col width="90">
                                    <col width="68">
                                    <col width="68">
                                    <col width="95">
                                    <col width="62">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="table-overflowY table-body" style="height: 6rem;">
                            <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                                <colgroup>
                                    <col width="40">
                                    <col width="90">
                                    <col width="68">
                                    <col width="68">
                                    <col width="95">
                                    <col width="62">
                                </colgroup>
                                <tbody class="table-tbody">
                                    <tr draggable="false" class="table-row">
                                        <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
          
                    <div class="list-box" style="display:none">
                        <div class="table-head">
                            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                                <colgroup>
                                    <col width="40">
                                    <col width="100">
                                    <col width="60">
                                    <col width="60">
                                    <col width="60">
                                    <col width="60">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <tr>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                    </tr>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="table-overflowY table-body" style="height: 6rem;">
                            <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                                <colgroup>
                                    <col width="40">
                                    <col width="100">
                                    <col width="60">
                                    <col width="60">
                                    <col width="60">
                                    <col width="60">
                                </colgroup>
                                <tbody class="table-tbody">
                                    <tr draggable="false" class="table-row">
                                       <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                   
                    <div class="list-box" style="display:none">
                        <div class="table-head">
                            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                                <colgroup>
                                    <col width="40">
                                    <col width="100">
                                    <col width="60">
                                    <col width="60">
                                    <col width="60">
                                    <col width="60">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                        <th>xxx</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="table-overflowY table-body" style="height: 6rem;">
                            <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                                <colgroup>
                                    <col width="40">
                                    <col width="100">
                                    <col width="60">
                                    <col width="60">
                                    <col width="60">
                                    <col width="60">
                                </colgroup>
                                <tbody class="table-tbody">
                                    <tr draggable="false" class="table-row">
                                       <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                        <td>xxx</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

控制切换的js代码：

$('#tab-box3 li').click(function () {
            $(this).addClass("actived").siblings().removeClass("actived")
            var index = $(this).index()
            $('#tab-content3 .list-box').eq(index).show().siblings().hide()
        })

2.在vue页面中实现tab切换

<div :class="curIndex === 0 ? 'tabs active' : 'tabs'" @click="cityClick(0)">xxx</div>
        <div :class="curIndex === 1 ? 'tabs active' : 'tabs'" @click="cityClick(1)">yyy</div>

<div class="proEnter-distribution-charts" v-if="curIndex === 1">
xxxcontent
      </div>

<div class="proEnter-distribution-charts" v-if="curIndex === 0">
yyycontent
      </div>    

 methods: {
    cityClick(type) {
      this.curIndex = type
    }
  },