JavaScript實現網頁tab欄效果製作
阿新 • • 發佈：2020-11-24
JS網頁–tab欄製作，供大家參考，具體內容如下
在網頁的製作中，通常會使用到tab欄，例如淘寶，商品詳情，規格引數和累計評價三個欄，點選不同的欄下面出現的內容不同。在這樣的設計中，JS可以做到。
根據淘寶做出預設狀態下為商品介紹欄以及對應的文字，滑鼠點選其他欄目，點選的欄目背景顏色變紅，同時下面的欄目出現點選欄目的解釋。
程式原始碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tab欄切換操作</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.tab {
margin: 100px auto;
width: 1200px;
height: 330px;
background-color: royalblue;
}
.tab .tab_list {
height: 30px;
background-color: slategrey;
}
.tab ul li{
float: left;
list-style: none;
cursor: pointer;
width: 100px;
height: 30px;
}
.color {
background-color: red;
}
.tab .tab_con {
height: 300px;
background-color: silver;
}
</style>
</head>
<body>
<div class = "tab">
<div class="tab_list">
<ul>
<li class = "color">商品介紹</li>
<li>規格與包裝</li>
<li>售後保障</li>
<li>商品評價</li>
<li>手機社群</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display:block;">商品介紹</div>
<div class="item" style="display: none;">規格與包裝</div>
<div class="item" style="display: none;">售後保障</div>
<div class="item" style="display: none;">商品評價</div>
<div class="item" style="display: none;">手機社群</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for(var i = 0;i<lis.length;i++){
//給所有的li新增自定義屬性索引號
lis[i].setAttribute('index',i)
//設定滑鼠點選事件
lis[i].onclick = function(){
for( var i = 0;i<lis.length;i++){
//將所有類的類名設定為空
lis[i].className='';
//將所有的display設定為none
items[i].style.display='none';
}
//給點選事件的類名設定為color
this.className='color';
//獲取點選事件的索引號
var index = this.getAttribute('index');
// for (var i=0;i<items.length;i++){
// items[i].style.display='none';
// }
//將點選事件的display設定為block
items[index].style.display = 'block';
}
}
</script>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。