HTML Javascript之tab欄切換
下面是這個js要做的效果圖
- 第一步當然是寫原生的html標籤
- 第二步做出靜態效果
- 最後實現事件監聽
下面秀一下我寫的效果吧（其他的可以慢慢根據需要寫，我覺得應該不是很難）
話不多說，直接上代碼
下面是html標籤代碼
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介紹</li>
<li>規格與包裝</li>
<li>售後保障</li>
<li>商品評價</li>
<li>本店熱門</li>
</ul>
</div>
<div class="tab_con">
<div class="item">商品介紹模塊內容</div>
<div class="item">規格包裝模塊內容</div>
<div class="item">售後保障模塊內容</div>
<div class="item">商品評價模塊內容</div>
<div class="item">本店熱門模塊內容</div>
</div>
</div>
接下來當然是靜態頁面必備的css代碼
ul{
width: 469px;
background: #F9F5F1;
padding-left: 0px;
padding-right: 0px;
border-bottom: 3px solid indianred;
}
li{
width: 90px;
height: 30px;
display: inline-block;
line-height: 30px;
text-align: center;
}
.current{
background:#F94;
}
/*設置第一個div顯示*/
.item:first-child{
display: block;
}
.item{
width: 469px;
height: 300px;
border: 1px solid darkcyan;
background: #F9F5F1;
/*以下兩行代碼爲了讓文字垂直水平都居中*/
line-height: 300px;
text-align: center;
font-size: 28px;
font-weight: 700;
display: none;
}
最後當然是js交互效果的代碼
var tab_list = document.querySelector('.tab_list');
var lis = document.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0;i<lis.length;i++) {
lis[i].setAttribute('index',i);
lis[i].onclick = function () {
for (const argumentsKey in lis) {
lis[argumentsKey].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
for (var i = 0;i<items.length;i++)
items[i].style.display = 'none';
items[index].style.display = 'block';
}
}
提醒一下，注意css和js外面包裹的標籤
最後的最後，爲了方便查看，附上一個完整版的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
width: 469px;
background: #F9F5F1;
padding-left: 0px;
padding-right: 0px;
border-bottom: 3px solid indianred;
}
li{
width: 90px;
height: 30px;
display: inline-block;
line-height: 30px;
text-align: center;
}
.current{
background:#F94;
}
/*設置第一個div顯示*/
.item:first-child{
display: block;
}
.item{
width: 469px;
height: 300px;
border: 1px solid darkcyan;
background: #F9F5F1;
/*以下兩行代碼爲了讓文字垂直水平都居中*/
line-height: 300px;
text-align: center;
font-size: 28px;
font-weight: 700;
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介紹</li>
<li>規格與包裝</li>
<li>售後保障</li>
<li>商品評價</li>
<li>本店熱門</li>
</ul>
</div>
<div class="tab_con">
<div class="item">商品介紹模塊內容</div>
<div class="item">規格包裝模塊內容</div>
<div class="item">售後保障模塊內容</div>
<div class="item">商品評價模塊內容</div>
<div class="item">本店熱門模塊內容</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab_list');
var lis = document.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0;i<lis.length;i++) {
lis[i].setAttribute('index',i);
lis[i].onclick = function () {
for (const argumentsKey in lis) {
lis[argumentsKey].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
for (var i = 0;i<items.length;i++)
items[i].style.display = 'none';
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
有何不足，敬請指正。