JS實(shí)現(xiàn)Tab欄切換的兩種方式案例詳解
更新時(shí)間：2022年08月15日 08:43:40 作者：yule-i7
這篇文章主要介紹了JS實(shí)現(xiàn)Tab欄切換的兩種方式,一種是面向過程的寫法，一種是面向?qū)ο蟮膶懛?，本文給大家分享詳細(xì)案例代碼，需要的朋友可以參考下
面向過程的寫法
<!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>
*{
padding: 0;
margin: 0;
}
div{
width: 500px;
border: 1px solid red;
}
ul{
overflow: hidden;
}
ul>li{
list-style: none;
float: left;
width: 50px;
text-align: center;
}
div>div{
height: 300px;
background-color: pink;
text-align: center;
font-size: 50px;
}
#lastBox{
display: none;
}
.selected{
background-color: orange;
}
</style>
</head>
<body>
<div>
<ul>
<li id="first" class="selected">1</li>
<li id="last">2</li>
</ul>
<div id="firstBox">11111</div>
<div id="lastBox">222222</div>
</div>
<script>
var lis = document.querySelectorAll('ul>li')
var content = document.querySelectorAll('div>div')
//藏值 通過屬性來保存對(duì)應(yīng)的值 通過對(duì)應(yīng)的對(duì)象來藏
//加所有l(wèi)i添加點(diǎn)擊事件
for(var i=0;i<lis.length;i++){
// lis[i].setAttribute('data-index',i)
lis[i].index = i
lis[i].onclick = function(){
//排他思想 先將所有的全部設(shè)置一個(gè)值 然后再給自己設(shè)置一個(gè)值
for(var j=0;j<lis.length;j++){
lis[j].className = ""
}
this.className = "selected"
//排他
//先將其他的都隱藏 再給自己顯示
for(var j=0;j<content.length;j++){
content[j].style.display = "none"
}
// document.getElementById(this.id+'Box').style.display = 'block'
// content[this.getAttribute('data-index')].style.display = 'block'
content[this.index].style.display = 'block'
}
}
</script>
</body>
</html>
面向?qū)ο蟮膶懛?/p>
<!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;
}
#box{
width: 400px;
height: 400px;
border: 2px solid pink;
margin: 0 auto;
}
ul{
display: flex;
margin: 0 auto;
width: 400px;
position: relative;
}
ul>li{
list-style: none;
width: 100px;
height: 50px;
font-size: 40px;
text-align: center;
border: 1px solid white;
background-color: yellow;
}
ul .showli{
background-color: orange;
}
#box div{
width: 400px;
height: 350px;
position: absolute;
display: none;
}
#box .show{
display: block;
background-color: rgb(0, 183, 255);
font-size: 80px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="showli">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="show">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<script>
//用面向?qū)ο蟮乃季S寫tab欄切換
//屬性：選項(xiàng)框，選項(xiàng)框?qū)?yīng)要切換的頁(yè)面
class Tab{
constructor(ele){
this.box = document.getElementById(ele);
this.lis = this.box.querySelectorAll('ul > li');
this.divs = this.box.querySelectorAll('div');
}
change()
{
// console.log(this.box);
// console.log(this.lis);
// console.log(this.divs);
for(var i = 0; i < this.lis.length; i++)
{
//保存當(dāng)前this指向
var _this = this;
//保存每一個(gè)li的下標(biāo)，便于切換指定div
this.lis[i].index = i;
//每一個(gè)li添加點(diǎn)擊事件
this.lis[i].onclick = function()
{
//排他，清空所有l(wèi)i與盒子的類名
for(var j = 0; j < _this.lis.length; j++)
{
_this.lis[j].className = "";
_this.divs[j].className = "";
}
//單獨(dú)設(shè)置點(diǎn)擊的li類名，讓其樣式和其余未被點(diǎn)擊的li不同
this.className = "showli";
//檢查當(dāng)前l(fā)i的下標(biāo)是否成功保存
// console.log(this.index);
//讓li對(duì)應(yīng)的div顯示出來
_this.divs[this.index].className = "show";
}
}
}
}
var tab = new Tab("box");
tab.change();
</script>
</body>
</html>到此這篇關(guān)于JS實(shí)現(xiàn)Tab欄切換的兩種方式的文章就介紹到這了,更多相關(guān)JS Tab欄切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript通過prototype給對(duì)象定義屬性用法實(shí)例
這篇文章主要介紹了JavaScript通過prototype給對(duì)象定義屬性用法,實(shí)例分析了prototype的功能及使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細(xì)介紹了用js編寫留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
bootstrap table插件的分頁(yè)與checkbox使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap table插件的分頁(yè)與checkbox使用詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家分享了B/S(Web)實(shí)時(shí)通訊的解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
JavaScript實(shí)現(xiàn)氣球打字的小游戲
這篇文章主要介紹了JavaScript實(shí)現(xiàn)氣球打字的小游戲，下面文章的思路來源于打字游戲，具體實(shí)現(xiàn)過程,需要的朋友可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-04-04
js字符串類型String常用操作實(shí)例總結(jié)
這篇文章主要介紹了js字符串類型String常用操作,結(jié)合實(shí)例形式總結(jié)分析了javascript字符串類型String常用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-07-07 
基于JavaScript實(shí)現(xiàn)焦點(diǎn)圖輪播效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)焦點(diǎn)圖輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03 
webpack5新特性Asset?Modules資源模塊詳解
這篇文章主要為大家介紹了webpack5新特性Asset?Modules資源模塊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03 
這篇文章主要為大家詳細(xì)介紹了JavaScript制作一個(gè)簡(jiǎn)單的框選圖表，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05