幾種實現tab欄切換的方法
阿新 • • 發佈:2021-07-29
目錄
tab欄一個重要的思想是排他:就是隻顯示自己點選的tab欄,其它的tab欄都不要顯示。
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.面向物件(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');