每天一个小知识点学习记录---分别在html页面和vue页面中实现tab切换
1.在html页面中实现tab切换
<ul class="tab-box" id="tab-box3">
<li class="actived">111li>
<li>222li>
<li>333li>
<li>444li>
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>xxxth>
<th>xxxth>
<th>xxxth>
<th>xxxth>
<th>xxxth>
<th>xxxth>
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>xxxtd>
<td>xxxtd>
<td>xxxtd>
<td>xxxtd>
<td>xxxtd>
<td>xxxtd>
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>xxxth>
<th>xxxth>
<th>xxxth>
<th>xxxth>
<th>xxxth>
<th>xxxth>
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>xxxtd>
<td>xxxtd>
<td>xxxtd>
<td>xxxtd>
<td>xxxtd>
<td>xxxtd>
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>xxxth>
<th>xxxth>
<th>xxxth>
<th>xxxth>
<th>xxxth>
<th>xxxth>
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>xxxtd>
<td>xxxtd>
<td>xxxtd>
<td>xxxtd>
<td>xxxtd>
<td>xxxtd>
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)">xxxdiv>
<div :class="curIndex === 1 ? 'tabs active' : 'tabs'" @click="cityClick(1)">yyydiv>
<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
}
},
这种实现方式只能实现两个tab切换，多余两个就无法控制了！
以我目前的技术只能想到这样的实现方式，如果大家有更好的实现方法，评论留言，不吝赐教！