目前，實現(xiàn)選項卡有三種主流的方法，下面本蒟蒻就來給大家詳細介紹一下。
方法一：通過CSS的偽類實現(xiàn)
首先，在HTML部分先準備好選項卡的標簽，例如：
```
選項卡1的內(nèi)容
選項卡2的內(nèi)容
選項卡3的內(nèi)容
```
然后，在CSS部分定義選項卡的樣式以及選項卡的狀態(tài)，例如：
```
/*選項卡的樣式*/
.tab_list li{
display: inline-block;
margin-right: 20px;
padding: 10px 20px;
background-color: #eee;
}
/*選中選項卡的樣式*/
.tab_list li.active{
background-color: #ccc;
}
/*選項卡內(nèi)容的樣式*/
.tab_item{
display: none;
}
/*選中選項卡的內(nèi)容樣式*/
.tab_item.active{
display: block;
}
```
最后，在JavaScript部分來處理選項卡的點擊事件，例如：
```
/*獲取選項卡的元素*/
let tab_list = document.querySelector('.tab_list');
let tab_items = document.querySelectorAll('.tab_item');
/*循環(huán)遍歷選項卡元素*/
tab_list.addEventListener('click', function(e){
/*阻止默認事件*/
e.preventDefault();
/*獲取選項卡的狀態(tài)*/
let tab_state = e.target.parentNode.classList.contains('active');
/*判斷選項卡當前是否選中*/
if(!tab_state){
/*移除所有選項卡的選中狀態(tài)*/
tab_items.forEach(function(item){
item.classList.remove('active');
});
/*給當前選中的選項卡添加選中狀態(tài)*/
e.target.parentNode.classList.add('active');
/*隱藏所有選項卡內(nèi)容*/
tab_items.forEach(function(item){
item.classList.remove('active');
});
/*顯示當前選中的選項卡內(nèi)容*/
let tab_id = e.target.getAttribute('href').substr(1);
document.getElementById(tab_id).classList.add('active');
}
});
```
方法二：通過CSS的~選擇器實現(xiàn)
首先，在HTML部分先準備好選項卡的標簽，例如：
```
選項卡1的內(nèi)容
選項卡2的內(nèi)容
選項卡3的內(nèi)容
```
然后，在CSS部分定義選項卡的樣式以及選項卡的狀態(tài)，例如：
```
/*選項卡的樣式*/
.tab_list li{
display: inline-block;
margin-right: 20px;
padding: 10px 20px;
background-color: #eee;
}
/*選項卡的狀態(tài)*/
.tab_list li.active a{
background-color: #ccc;
}
/*選項卡內(nèi)容的樣式*/
.tab_item{
display: none;
}
/*選項卡的狀態(tài)*/
.tab_item.active,
.tab_item.active + .tab_item{
display: block;
}
```
最后，在JavaScript部分來處理選項卡的點擊事件，例如：
```
/*獲取選項卡的元素*/
let tab_list = document.querySelector('.tab_list');
let tab_items = document.querySelectorAll('.tab_item');
/*循環(huán)遍歷選項卡元素*/
tab_list.addEventListener('click', function(e){
/*阻止默認事件*/
e.preventDefault();
/*獲取選項卡的狀態(tài)*/
let tab_state = e.target.parentNode.classList.contains('active');
/*判斷選項卡當前是否選中*/
if(!tab_state){
/*移除所有選項卡的選中狀態(tài)*/
tab_items.forEach(function(item){
item.classList.remove('active');
});
/*給當前選中的選項卡添加選中狀態(tài)*/
e.target.parentNode.classList.add('active');
}
});
```
方法三：通過CSS的:checked偽類實現(xiàn)
首先，在HTML部分先準備好選項卡的標簽，例如：
```
選項卡1的內(nèi)容
選項卡2的內(nèi)容
選項卡3的內(nèi)容
```
然后，在CSS部分定義選項卡的樣式以及選項卡的狀態(tài)，例如：
```
/*選項卡的樣式*/
label{
display: inline-block;
padding: 10px 20px;
margin-right: 20px;
background-color: #eee;
}
/*選項卡的狀態(tài)*/
input[type="radio"]:checked + label{
background-color: #ccc;
}
/*選項卡內(nèi)容的樣式*/
.tab_item{
display: none;
}
/*選項卡的狀態(tài)*/
input[type="radio"]:checked + label + .tab_content .tab_item{
display: block;
}
```
最后，在JavaScript部分來處理選項卡的點擊事件，例如：
```
/*獲取選項卡的元素*/
let tab_list = document.querySelectorAll('input[name="tab"]');
let tab_items = document.querySelectorAll('.tab_item');
/*循環(huán)遍歷選項卡元素*/
tab_list.forEach(function(tab){
tab.addEventListener('change', function(){
/*移除所有選項卡的選中狀態(tài)*/
tab_items.forEach(function(item){
item.classList.remove('active');
});
/*給當前選中的選項卡添加選中狀態(tài)*/
let tab_id = this.getAttribute('id');
document.querySelector('.tab_content '+ '#' + tab_id + '.tab_item').classList.add('active');
});
});
```
好了，以上就是三種實現(xiàn)選項卡的方法，其中第一種和第二種方法比較常見，大家可以根據(jù)自己的實際情況選擇不同的方式。 yinyiprinting.cn 寧波海美seo網(wǎng)絡優(yōu)化公司 是網(wǎng)頁設計制作，網(wǎng)站優(yōu)化，企業(yè)關鍵詞排名，網(wǎng)絡營銷知識和開發(fā)愛好者的一站式目的地，提供豐富的信息、資源和工具來幫助用戶創(chuàng)建令人驚嘆的實用網(wǎng)站。 該平臺致力于提供實用、相關和最新的內(nèi)容，這使其成為初學者和經(jīng)驗豐富的專業(yè)人士的寶貴資源。
聲明本文內(nèi)容來自網(wǎng)絡,若涉及侵權(quán),請聯(lián)系我們刪除! 投稿需知:請以word形式發(fā)送至郵箱[email protected]
謝謝啦Z老師