JavaScript實現(xiàn)選項卡功能(面向過程與面向對象)
更新時間：2022年02月11日 15:27:25 作者：大聰明碼農(nóng)徐
本文主要介紹了JavaScript實現(xiàn)選項卡功能(面向過程與面向對象)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
面向過程
注意：
ul>li 標簽屬性中 的index屬性值是串聯(lián)起ol>li與ul>li的關鍵，通過調(diào)用相同索引下標的數(shù)組中的不同屬性的屬性值達到切換內(nèi)容的效果。
通過事件委托找到對應的ul>li 進行css屬性的刪除與新增做到背景顏色改變和內(nèi)容改變的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol,li{
list-style: none;
}
.box{
width: 800px;
height: 600px;
border: 3px solid #000;
margin: 50px auto;
display: flex;
flex-direction: column;
}
.box > ul{
width: 100%;
height: 100px;
display: flex;
}
.box > ul >li{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
background: pink;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
color: #fff;
}
.box > ul >li:last-child{
border-right: none;
}
.box > ul >li.active{
color: red;
text-decoration: underline;
background: orange;
}
.box > ol {
flex: 1;
position: relative;
}
.box > ol >li{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
background: cyan;
display: none;
color: #fff;
}
.box > ol > li.active{
display: flex;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 面向過程
// 定義數(shù)組 模擬數(shù)據(jù)庫數(shù)據(jù)
var arr1 = [
{ id:1 , ulLi:'精選' , olLi:'精選內(nèi)容' },
{ id:2 , ulLi:'美食' , olLi:'美食內(nèi)容' },
{ id:3 , ulLi:'百貨' , olLi:'百貨內(nèi)容' },
{ id:4 , ulLi:'個護' , olLi:'個護內(nèi)容' },
];
// 獲取標簽對象
const oBox = document.querySelector('.box');
// 定義全局變量儲存數(shù)據(jù)
let oUlLis ;
let oOlLis ;
// 調(diào)用函數(shù) 動態(tài)渲染生成頁面
setPage();
// 調(diào)用函數(shù) 添加事件
setEvent();
// 定義函數(shù)1 動態(tài)生成頁面
function setPage(){
// 創(chuàng)建固定的標簽節(jié)點 ul ol
const oUl = document.createElement('ul');
const oOl = document.createElement('ol');
// 定義字符串 存儲動態(tài)渲染生成的ul>li ol>li
let ulLiStr = '';
let olLiStr = '';
// 循環(huán)遍歷數(shù)組 根據(jù)數(shù)組中的內(nèi)容動態(tài)渲染生成li標簽
arr1.forEach( function(item,key){
// item 是 數(shù)組單元存儲的數(shù)據(jù) 也就是 存儲數(shù)據(jù)的對象
// key 是 數(shù)組單元的索引下標
// 第一個ul>li 有 class,active樣式
ulLiStr += key === 0 ? `<li name="ulLi" index="${key}" class="active">${item.ulLi}</li>` : `<li index="${key}" name="ulLi">${item.ulLi}</li>` ;
// 第一個ol>li 有 class,active樣式
olLiStr += key === 0 ? `<li class="active">${item.olLi}</li>` : `<li>${item.olLi}</li>` ;
});
console.log( ulLiStr );
console.log( olLiStr );
// 將字符串寫入ul ol 標簽
oUl.innerHTML = ulLiStr ;
oOl.innerHTML = olLiStr ;
// 將 ul ol 標簽 寫入 div標簽中
oBox.appendChild( oUl );
oBox.appendChild( oOl );
// 獲取所有的ul>li
oUlLis = oUl.querySelectorAll('li');
// 獲取所有的ol>li
oOlLis = oOl.querySelectorAll('li');
}
// 定義函數(shù)2 給標簽添加事件
// 參數(shù) 綁定事件的事件類型 可以是click mouseover 默認值是 mouseover
function setEvent( event = 'mouseover' ){
// 給 父級標簽 添加 事件 通過事件委托完成效果
oBox.addEventListener( event , function(e){
if( e.target.getAttribute('name') === 'ulLi' ){
// 清除所有 ul>li 的 class,active
oUlLis.forEach( function(item , key){
// item 是 ul>li中 li標簽對象
// key 是 ul>li中 li標簽對象的索引下標
// 同時也是 ol>li中 li標簽對象的索引下標
item.classList.remove('active');
// key是ul>li的索引下標 也就是ol>li的索引下標
// oOlLs數(shù)組可以通過索引下標 獲取到 ol>li標簽對象
oOlLis[key].classList.remove('active');
})
// 給觸發(fā)事件的ul>li標簽添加class,active
e.target.classList.add('active');
// 給觸發(fā)事件的ul>li標簽 對應的ol>li標簽添加class,active
// 也就是和 e.target 觸發(fā)事件標簽 索引下標相同的 ol>li標簽
// 也就是獲取 e.target標簽 index屬性的屬性值
// 標簽屬性的屬性值 都是 字符串類型 需要轉化為數(shù)值類型
oOlLis[ Number( e.target.getAttribute('index') ) ].classList.add('active');
}
})
}
</script>
</body>
</html>面向對象
注意：
- 之前調(diào)用的是變量，現(xiàn)在調(diào)用的是對象中存儲的屬性與屬性值 。
- 確保 this 的指向是對象，當事件綁定 forEach 定時器延時器... 中 this指向 會改變
- 修改this指向的方法：提前使用變量 存儲 原始this指向，使用 變量 替代 this關鍵詞
代碼展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
.box {
width: 800px;
height: 600px;
border: 3px solid #000;
margin: 50px auto;
display: flex;
flex-direction: column;
}
.box>ul {
width: 100%;
height: 100px;
display: flex;
}
.box>ul>li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
background: pink;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
color: #fff;
}
.box>ul>li:last-child {
border-right: none;
}
.box>ul>li.active {
color: red;
text-decoration: underline;
background: orange;
}
.box>ol {
flex: 1;
position: relative;
}
.box>ol>li {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
background: cyan;
display: none;
color: #fff;
}
.box>ol>li.active {
display: flex;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 導入外部文件 -->
<script src="./tab.js"></script>
<script>
// 定義數(shù)組 模擬數(shù)據(jù)庫數(shù)據(jù)
const arr1 = [
{ id: 1, ulLi: '精選', olLi: '精選內(nèi)容' },
{ id: 2, ulLi: '美食', olLi: '美食內(nèi)容' },
{ id: 3, ulLi: '百貨', olLi: '百貨內(nèi)容' },
{ id: 4, ulLi: '個護', olLi: '個護內(nèi)容' },
];
// 獲取標簽對象
const oBox = document.querySelector('.box');
// ES6 構造函數(shù) 通過構造函數(shù)生成實例化對象
const obj = new CreateTabObj(oBox, arr1);
// 調(diào)用動態(tài)生成函數(shù)
obj.setPage();
// 調(diào)用點擊事件函數(shù)，參數(shù)為事件類型
obj.setEvent("click");
</script>
</body>
</html>外鏈構造函數(shù)代碼：
// 在外部文件中定義構造函數(shù)
class CreateTabObj{
// 構造器 定義屬性和屬性值
// element 創(chuàng)建生成選項卡的標簽對象
// msgArr 生成選項開內(nèi)容的數(shù)組
constructor( element , msgArr ){
this.ele = element ;
this.arr = msgArr ;
// 定義屬性 存儲 面向過程中 需要的全局變量
this.oUlLis;
this.oOlLis;
}
// 構造器外定義函數(shù)方法
// 函數(shù)1 動態(tài)生成頁面
setPage(){
// 創(chuàng)建固定的標簽節(jié)點 ul ol
const oUl = document.createElement('ul');
const oOl = document.createElement('ol');
// 定義字符串 存儲動態(tài)渲染生成的ul>li ol>li
let ulLiStr = '';
let olLiStr = '';
// 循環(huán)遍歷數(shù)組 根據(jù)數(shù)組中的內(nèi)容動態(tài)渲染生成li標簽
// 之前是 直接調(diào)用 變量 arr1 中 存儲的數(shù)據(jù)
// 現(xiàn)在是 調(diào)用 實例化對象中arr屬性存儲的數(shù)據(jù)
// arr1 ---> this.arr
this.arr.forEach( function(item,key){
// item 是 數(shù)組單元存儲的數(shù)據(jù) 也就是 存儲數(shù)據(jù)的對象
// key 是 數(shù)組單元的索引下標
// 第一個ul>li 有 class,active樣式
ulLiStr += key === 0 ? `<li name="ulLi" index="${key}" class="active">${item.ulLi}</li>` : `<li index="${key}" name="ulLi">${item.ulLi}</li>` ;
// 第一個ol>li 有 class,active樣式
olLiStr += key === 0 ? `<li class="active">${item.olLi}</li>` : `<li>${item.olLi}</li>` ;
});
// 將字符串寫入ul ol 標簽
oUl.innerHTML = ulLiStr ;
oOl.innerHTML = olLiStr ;
// 將 ul ol 標簽 寫入 div標簽中
// 標簽對象 ---> this.ele
this.ele.appendChild( oUl );
this.ele.appendChild( oOl );
// 獲取所有的ul>li
this.oUlLis = oUl.querySelectorAll('li');
// 獲取所有的ol>li
this.oOlLis = oOl.querySelectorAll('li');
}
// 函數(shù)2 添加事件
// 設定參數(shù) 存儲事件類型 可以是 click 可以是 mouseover 默認值是 mouseover
setEvent( event = 'mouseover' ){
// class 構造函數(shù)中 this指向 默認是 對象
console.log( this);
// 給 父級標簽 添加 事件 通過事件委托完成效果
// 提前定義一個變量 存儲 原始this指向
const _this = this ;
// 事件綁定 中 this指向改變
this.ele.addEventListener( event , function(e){
// 事件綁定中 this指向 默認是 事件源
// 不再是 對象
// 也就是在 事件綁定中 this.屬性 不能 正確調(diào)用對象中的數(shù)據(jù)
if( e.target.getAttribute('name') === 'ulLi' ){
// 清除所有 ul>li 的 class,active
_this.oUlLis.forEach( function(item , key) {
// 給 ul>li 清除 class,active
item.classList.remove('active');
// 給 索引下標相同的 ol>li 清除 class,active
_this.oOlLis[key].classList.remove('active');
})
// 給 點擊的 ul>li 添加 class,active
e.target.classList.add('active');
// 給 點擊的 ul>li 索引下標 相同的 ol>li 添加 class,active
_this.oOlLis[ Number( e.target.getAttribute('index') ) ].classList.add('active');
}
})
}
}運行結果：
到此這篇關于JavaScript實現(xiàn)選項卡功能(面向過程與面向對象)的文章就介紹到這了,更多相關JavaScript 選項卡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這幾天遇到幾個頭疼的火狐與ie兼容問題整理下來，希望對需要的朋友有所幫助。2010-07-07
這是一個通過js實現(xiàn)的支付后的頁面，點擊支付會跳出一個彈窗，提示你是否要確定支付，確定后進入付后界面，該頁面有著10秒倒計時，計時結束后便會返回原界面，也可以選擇立刻返回，來返回主頁面，這篇文章主要介紹了基于JS實現(xiàn)01支付后的10秒倒計時,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了Bootstrap CSS組件之輸入框組(input-group),具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了JS實現(xiàn)隨機抽獎小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
web3.js調(diào)用鏈上的方法操作NFT區(qū)塊鏈MetaMask詳解
這篇文章主要為大家介紹了web3.js調(diào)用鏈上的方法操作NFT區(qū)塊鏈MetaMask詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖自動切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Javascript仿新浪游戲頻道鼠標懸停顯示子菜單效果,涉及鼠標事件及頁面元素結點的遍歷技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了簡單了解JavaScript彈窗實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
本文主要介紹了Webpack自動清理打包目錄的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要為大家詳細介紹了javascrpt密碼強度校驗函數(shù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03