毎日1つの小さな知識点学習記録---htmlページとvueページでtab切り替えを実現する
60546 ワード
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>
$('#tab-box3 li').click(function () {
$(this).addClass("actived").siblings().removeClass("actived")
var index = $(this).index()
$('#tab-content3 .list-box').eq(index).show().siblings().hide()
})
<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 ， ！