<!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: 600px;
height: 300px;
border: 5px #000 solid;
margin: 50px auto;
}
ul , ol , li {
list-style: none;
}
.box > ul {
width: 100%;
height: 40px;
overflow: hidden;
}
.box > ul > li {
width: 200px;
float: left;
height: 100%;
line-height: 40px;
font-size: 30px;
text-align: center;
background: orange;
cursor: pointer;
}
.box > ul > li.active {
background-color: purple;
}
.box > ol {
position: relative;
width: 100%;
height: 260px;
}
.box > ol > li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
line-height: 260px;
text-align: center;
font-size: 100px;
background-color: skyblue;
display: none;
}
.box > ol > li.active {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
// 面向?qū)ο蟮倪x項卡
// 1、抽象內(nèi)容
// + 屬性 btns
// + 屬性 tabs
// + 方法 能實現(xiàn)點擊事件切換的方法
// 2稿壁、書寫構(gòu)造函數(shù)
// + 接受一個參數(shù):范圍元素
// 3讲弄、方法里面實現(xiàn)選項卡
// +
function Tabs(ele) {
// 拿到出現(xiàn)選項卡的范圍
this.ele = document.querySelector(ele)
// 找到btns
this.btns = this.ele.querySelectorAll('ul>li')
// 找到tabs
this.tabs = this.ele.querySelectorAll('ol>li')
console.log(this.tabs);
Tabs.prototype.change = function() {
// 這個位置的this是當(dāng)前實例
var that = this;
// 操作的是當(dāng)前實例的btns tabs
// this 就是當(dāng)前實例攒读，我們就要給this.btns的每一個添加點擊事件
this.btns.forEach(function (item,index) {
item.addEventListener('click',function(){
// this：你所點擊的這個li
// that：實例對象
// console.log(that);
that.btns.forEach(function(t, i){
that.btns[i].className = '';
that.tabs[i].className = '';
})
// 給對應(yīng)的添加類名
item.className = 'active';
that.tabs[index].className = 'active';
})
});
}
}
let t1 = new Tabs('.box');
t1.change()
</script>
</body>
</html>
面向?qū)ο蟮倪x項卡案例
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來破花，“玉大人谦趣，你說我怎么就攤上這事疲吸。” “怎么了前鹅？”我有些...
- 文/不壞的土叔 我叫張陵摘悴，是天一觀的道長。 經(jīng)常有香客問我舰绘，道長蹂喻，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任除盏，我火速辦了婚禮叉橱，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘者蠕。我一直安慰自己窃祝，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布踱侣。 她就那樣靜靜地躺著粪小，像睡著了一般。 火紅的嫁衣襯著肌膚如雪抡句。 梳的紋絲不亂的頭發(fā)上探膊，一...
- 文/蒼蘭香墨 我猛地睜開眼雕憔，長吁一口氣：“原來是場噩夢啊……” “哼姿骏！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起斤彼，我...
- 正文 年R本政府宣布，位于F島的核電站扮超，受9級特大地震影響取刃，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜出刷，卻給世界環(huán)境...
- 文/蒙蒙 一璧疗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧馁龟，春花似錦崩侠、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至矢炼，卻和暖如春系瓢，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背句灌。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 面向過程的tab選項卡 下面我們要把它改成面向?qū)ο蟮倪x項卡 第一步：解開所有嵌套函數(shù) 將onclick后面的匿名函...
- 面向過程寫法簡單，但用起來不方便榛搔，面向?qū)ο髮懛ㄐ矢吲捣玻闷饋矸奖?/div>用面向?qū)ο髮崿F(xiàn)Tab選項卡 面向?qū)ο笫且环N思想,從面向過程到面向?qū)ο蟮霓D(zhuǎn)變需要一個過程 HTML結(jié)構(gòu) Css樣式 ...
