tab欄一個重要的思想是 排他：就是只顯示自己點擊的tab欄，其它的tab欄都不要顯示。
1.利用v-if（uni實例）
效果：
v-if控制tab頁面的顯示
動態綁定class類，用來顯示被選中的tab樣式
<!-- tab -->
<view class="tab">
<view class="tab_list">
<view @tap="change(0)" :class="{btna:btnnum == 0}">相關崗位</view>
<view @tap="change(1)" :class="{btna:btnnum == 1}">相關公司</view>
</view>
<!-- tab1的頁面-->
<view v-if="btnnum == 0">
這是tab1的頁面
</view>
<view v-if="btnnum == 1">
這是tab2的頁面
</view>
</view>
.btna {
color: #1345a4;
}
data() {
return {
btnnum: 0
}
}
2.利用display控制
還有一種思想是利用display控制tab頁面的顯示與否
默認display：‘none’
當選中tab標簽時，切換類為：display：‘block’
3.利用router（vue實例）
在頁面中有一個vue實例對象，vue實例對象中有四個組件，分別是tab欄切換需要顯示的組件內容
頁面中放四個超鏈接，當我們點擊這些超鏈接的時候，就會改變url地址中的hash值，當hash值被改變時，就會觸發onhashchange事件
在觸發onhashchange事件的時候，我們根據hash值來讓不同的組件進行顯示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 導入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
</head>
<body>
<!-- 被 vue 實例控制的 div 區域 -->
<div id="app">
<!-- 切換組件的超鏈接 -->
<a href="#/zhuye">主頁</a>
<a href="#/keji">科技</a>
<a href="#/caijing">財經</a>
<a href="#/yule">娛樂</a>
<!-- 根據 :is 屬性指定的組件名稱，把對應的組件渲染到 component 標簽所在的位置 -->
<!-- 可以把 component 標簽當做是【組件的占位符】 -->
<component :is="comName"></component>
</div>
<script>
// #region 定義需要被切換的 4 個組件
// 主頁組件
const zhuye = {
template: '<h1>主頁信息</h1>'
}
// 科技組件
const keji = {
template: '<h1>科技信息</h1>'
}
// 財經組件
const caijing = {
template: '<h1>財經信息</h1>'
}
// 娛樂組件
const yule = {
template: '<h1>娛樂信息</h1>'
}
// #endregion
// #region vue 實例對象
const vm = new Vue({
el: '#app',
data: {
comName: 'zhuye'
},
// 注冊私有組件
components: {
zhuye,
keji,
caijing,
yule
}
})
// #endregion
// 監聽 window 的 onhashchange 事件，根據獲取到的最新的 hash 值，切換要顯示的組件的名稱
window.onhashchange = function() {
// 通過 location.hash 獲取到最新的 hash 值
console.log(location.hash);
switch(location.hash.slice(1)){
case '/zhuye':
vm.comName = 'zhuye'
break
case '/keji':
vm.comName = 'keji'
break
case '/caijing':
vm.comName = 'caijing'
break
case '/yule':
vm.comName = 'yule'
break
}
}
</script>
</body>
</html>
4.面向對象(html實例)
效果：
<main>
<h4>
Js 面向對象 動態添加標簽頁
</h4>
<div class="tabsbox" id="tab">
<!-- tab 標簽 -->
<nav class="fisrstnav">
<ul>
<li class="liactive"><span>測試1</span><span class="iconfont icon-guanbi"></span></li>
<li><span>測試2</span><span class="iconfont icon-guanbi"></span></li>
<li><span>測試3</span><span class="iconfont icon-guanbi"></span></li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<!-- tab 內容 -->
<div class="tabscon">
<section class="conactive">測試1</section>
<section>測試2</section>
<section>測試3</section>
</div>
</div>
</main>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
main {
width: 960px;
height: 500px;
border-radius: 10px;
margin: 50px auto;
}
main h4 {
height: 100px;
line-height: 100px;
text-align: center;
}
.tabsbox {
width: 900px;
margin: 0 auto;
height: 400px;
border: 1px solid lightsalmon;
position: relative;
}
nav ul {
overflow: hidden;
}
nav ul li {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border-right: 1px solid #ccc;
position: relative;
}
nav ul li.liactive {
border-bottom: 2px solid #fff;
z-index: 9;
}
#tab input {
width: 80%;
height: 60%;
}
nav ul li span:last-child {
position: absolute;
user-select: none;
font-size: 12px;
top: -18px;
right: 0;
display: inline-block;
height: 20px;
}
.tabadd {
position: absolute;
/* width: 100px; */
top: 0;
right: 0;
}
.tabadd span {
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid #ccc;
float: right;
margin: 10px;
user-select: none;
}
.tabscon {
width: 100%;
height: 300px;
position: absolute;
padding: 30px;
top: 50px;
left: 0px;
box-sizing: border-box;
border-top: 1px solid #ccc;
}
.tabscon section,
.tabscon section.conactive {
display: none;
width: 100%;
height: 100%;
}
.tabscon section.conactive {
display: block;
}
var that;
class Tab {
constructor(id) {
// 獲取元素
that = this;
this.main = document.querySelector(id);
this.add = this.main.querySelector('.tabadd');
// li的父元素
this.ul = this.main.querySelector('.fisrstnav ul:first-child');
// section 父元素
this.fsection = this.main.querySelector('.tabscon');
this.init();
}
init() {
this.updateNode();
// init 初始化操作讓相關的元素綁定事件
this.add.onclick = this.addTab;
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].index = i;
this.lis[i].onclick = this.toggleTab;
this.remove[i].onclick = this.removeTab;
this.spans[i].ondblclick = this.editTab;
this.sections[i].ondblclick = this.editTab;
}
}
// 因為我們動態添加元素 需要從新獲取對應的元素
updateNode() {
this.lis = this.main.querySelectorAll('li');
this.sections = this.main.querySelectorAll('section');
this.remove = this.main.querySelectorAll('.icon-guanbi');
this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');
}
// 1. 切換功能
toggleTab() {
// console.log(this.index);
that.clearClass();
this.className = 'liactive';
that.sections[this.index].className = 'conactive';
}
// 清除所有li 和section 的類
clearClass() {
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].className = '';
this.sections[i].className = '';
}
}
// 2. 添加功能
addTab() {
that.clearClass();
// (1) 創建li元素和section元素
var random = Math.random();
var li = '<li class="liactive"><span>新選項卡</span><span class="iconfont icon-guanbi"></span></li>';
var section = '<section class="conactive">測試 ' + random + '</section>';
// (2) 把這兩個元素追加到對應的父元素里面
that.ul.insertAdjacentHTML('beforeend', li);
that.fsection.insertAdjacentHTML('beforeend', section);
that.init();
}
// 3. 刪除功能
removeTab(e) {
e.stopPropagation(); // 阻止冒泡 防止觸發li 的切換點擊事件
var index = this.parentNode.index;
console.log(index);
// 根據索引號刪除對應的li 和section remove()方法可以直接刪除指定的元素
that.lis[index].remove();
that.sections[index].remove();
that.init();
// 當我們刪除的不是選中狀態的li 的時候,原來的選中狀態li保持不變
if (document.querySelector('.liactive')) return;
// 當我們刪除了選中狀態的這個li 的時候, 讓它的前一個li 處於選定狀態
index--;
// 手動調用我們的點擊事件 不需要鼠標觸發
that.lis[index] && that.lis[index].click();
}
// 4. 修改功能
editTab() {
var str = this.innerHTML;
// 雙擊禁止選定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
// alert(11);
this.innerHTML = '<input type="text" />';
var input = this.children[0];
input.value = str;
input.select(); // 文本框里面的文字處於選定狀態
// 當我們離開文本框就把文本框里面的值給span
input.onblur = function() {
this.parentNode.innerHTML = this.value;
};
// 按下回車也可以把文本框里面的值給span
input.onkeyup = function(e) {
if (e.keyCode === 13) {
// 手動調用表單失去焦點事件 不需要鼠標離開操作
this.blur();
}
}
}
}
new Tab('#tab');