做題思路
方法1：
實現思路:
1, ul中的li標籤個數 和 ol中li標籤個數是相同的
按鈕和內容是一一對應的
2, 點擊按鈕標籤,也就是ul中的li標籤
給當前這個li標籤,添加class樣式,給其他的li標籤,去除class樣式
實現思路: 先給所有的li標籤,去除class樣式
再給當前的li標籤,添加class樣式
3, 點擊按鈕標籤,也就是ul中的li標籤
給 ol 中所有的 li標籤,去除class樣式
給 與 當前 ul>li 索引相同的 ol>li標籤,添加樣式
方法1：循環遍歷的方法
<head>
<meta charset="UTF-8">
<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;
}
.cont{
width: 800px;
height: 600px;
border: 5px solid #333;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.cont ul{
width: 100%;
height: 60px;
display: flex;
}
.cont ul li{
flex:1;
font-size: 35px;
color: #fff;
border-left: 2px solid blue;
border-right: 2px solid blue;
background: hotpink;
display: flex;
justify-content: center;
align-items: center;
}
.cont ol{
flex:1;
position: relative;
}
.cont ol li{
width: 100%;
height: 100%;
font-size: 150px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top:0;
left:0;
background: burlywood;
display: none;
}
/* 按鈕標籤 哪個標籤有這個屬性,哪個就顯示特殊背景顏色 */
.cont ul li.active{
background: skyblue;
color: black;
}
/* 內容標籤 哪個標籤有這個屬性,哪個就顯示 */
.cont ol li.active{
display: flex;
}
</style>
</head>
<body>
<div class="cont">
<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>
// tab切換 / 選項卡 效果
var oUllis = document.querySelectorAll('ul li');
var oOllis = document.querySelectorAll('ol li');
// 循環 ul中的所有li,添加點擊事件
oUllis.forEach(function(item , key){
// ul中的li標籤 , item就是ul中的li標籤
item.onclick = function(){
// 1,清除所有的ul,ol,中li的class樣式屬性
// 循環遍歷所有的ul和ol中的標籤
oUllis.forEach(function(v , k){
// v是ul中的li標籤
v.className = '';
// ul>li和ol>li索引是相同的
// 通過ul中li的索引也可以獲取ol中的li標籤
// oOllis[k] 就是 ol中的li標籤
oOllis[k].className = '';
})
// 循環結束,所有的ul,ol中,li都沒有active
// 給當前點擊的item標籤,也就是ul,li標籤,添加樣式
item.className = 'active';
// 給ol中,對應的這個標籤的索引的li標籤,添加樣式
oOllis[key].className = 'active';
}
})
</script>
</body>
方法2，事件委託方法
在這裏我們只提供 js 部分的代碼哦！ 因爲其它方面的代碼沒有什麼區別的
<script>
// 獲取父級div標籤對象
var oDiv = document.querySelector('div');
// 獲取標籤對象
var ullis = document.querySelectorAll('ul li');
var ollis = document.querySelectorAll('ol li');
// 給父級div添加點擊事件
// 獲取事件對象,我偷懶,不寫兼容了
oDiv.onclick = function(e){
// 判斷,點擊的是ul中的li標籤
// e.target,就是觸發點擊事件的標籤對象
// 如果點擊的標籤對象,name是ulli,表示點擊的是ul中的li標籤
if(e.target.getAttribute('name') === 'ulli'){
// 1,給所有的li標籤,清除樣式
ullis.forEach(function(item,key){
item.className = '';
ollis[key].className = '';
// 給item,也就是ul中的li標籤,定義屬性
item.setAttribute('index',key);
})
// 2,給當前ul中的li,添加樣式
// 沒有循環 當前的li是 e.target
e.target.className = 'active';
// 3,給對應的ol中的li,添加樣式
// 沒有forEach循環,沒有索引下標,獲取標籤中定義的屬性的屬性值
ollis[e.target.getAttribute('index')].className = 'active';
}
}
</script>
效果圖：
