DOM：手机底部导航切换效果
总结了两种方法：
方法一：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
<style>
.content {
width: 350px;
height: 500px;
background-color: goldenrod;
}
.view {
width: 350px;
height: 400px;
background-color: palegreen;
}
.tabbar {
width: 350px;
height: 100px;
background-color: goldenrod;
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
.btn {
width: 25%;
background-color: gainsboro;
cursor: pointer;
position: relative;
}
.btn:first-child {
background-color: skyblue;
}
.viewconent {
width: 350px;
height: 400px;
background-color: palegreen;
display: none;
}
.viewconent:first-child {
display: block;
}
#img1 {
visibility: visible;
display: block;
height: 40px;
width: 40px;
}
#img2 {
position: absolute;
visibility: hidden;
display: block;
height: 40px;
width: 40px;
top: 20px;
}
</style>
<div class="content">
<div class="view">
<div class="viewconent">home</div>
<div class="viewconent">car</div>
<div class="viewconent">my</div>
<div class="viewconent">set</div>
</div>
<div class="tabbar">
<div class="btn">
<span>home</span>
<img id='img1' src="./icon_grey/homefill.png" alt="">
<img id="img2" src="./icon_skyblue/homefill.png" alt="">
</div>
<div class="btn">
<span>car</span>
<img id='img1' src="./icon_grey/cartfill.png" alt="">
<img id="img2" src="./icon_skyblue/cartfill.png" alt="">
</div>
<div class="btn">
<span>my</span>
<img id='img1' src="./icon_grey/myfill.png" alt="">
<img id="img2" src="./icon_skyblue/myfill.png" alt="">
</div>
<div class="btn">
<span>set</span>
<img id='img1' src="./icon_grey/setting-fill.png" alt="">
<img id="img2" src="./icon_skyblue/setting-fill.png" alt="">
</div>
</div>
</div>
<script>
var tabbarbtns = document.querySelectorAll(".tabbar .btn");//获取每个底部的类名
tabbarbtns.forEach((el, index) => {
// console.log(el);//测试是否成功引入的实参
el.onclick = function () {
tabbarbtns.forEach((el2) => { el2.style.backgroundColor = "gainsboro"; })//获取点击事件，遍历每个底部分别设置背景颜色
el.style.backgroundColor = "skyblue";//将点击的部分背景颜色变为蓝色
//1.获取点击了第x个按钮index/el.indexof1()
//2.把内容区域的所有的隐藏 把内容区域的第x个显示
var viewconents = document.querySelectorAll(".viewconent");//获取所有的视图页面
viewconents.forEach((el3) => { el3.style.display = "none" });//将所有的都设置为不展示
viewconents[index].style.display = "block";//将点击的部分对应的视图设置为可看见
var img2 = document.querySelectorAll('#img2');
img2.forEach((el4,index) => { el4.style.visibility = "hidden" });
img2[index].style.visibility = "visible";
}
})
</script>
</body>
</html>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
<style>
.content {
width: 350px;
height: 500px;
background-color: goldenrod;
}
.view {
width: 350px;
height: 400px;
background-color: palegreen;
}
.tabbar {
width: 350px;
height: 100px;
background-color: goldenrod;
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
.btn {
width: 25%;
background-color: gainsboro;
cursor: pointer;
position: relative;
}
.btn:first-child {
background-color: skyblue;
}
.viewconent {
width: 350px;
height: 400px;
background-color: palegreen;
display: none;
}
.viewconent:first-child {
display: block;
}
#img1 {
visibility: visible;
display: block;
height: 40px;
width: 40px;
}
#img2 {
position: absolute;
visibility: hidden;
display: block;
height: 40px;
width: 40px;
top: 22px;
}
</style>
<div class="content">
<div class="view">
<div class="viewconent">home</div>
<div class="viewconent">car</div>
<div class="viewconent">my</div>
<div class="viewconent">set</div>
</div>
<div class="tabbar">
<div class="btn">
<span>home</span>
<img id='img1' src="./icon_grey/homefill.png" alt="">
</div>
<div class="btn">
<span>car</span>
<img id='img1' src="./icon_grey/cartfill.png" alt="">
</div>
<div class="btn">
<span>my</span>
<img id='img1' src="./icon_grey/myfill.png" alt="">
</div>
<div class="btn">
<span>set</span>
<img id='img1' src="./icon_grey/setting-fill.png" alt="">
</div>
</div>
</div>
<script>
var arr = [
{ img4: './icon_skyblue/homefill.png', img3: './icon_grey/homefill.png' },
{ img4: './icon_skyblue/cartfill.png', img3: './icon_grey/cartfill.png' },
{ img4: './icon_skyblue/myfill.png', img3: './icon_grey/myfill.png' },
{ img4: './icon_skyblue/setting-fill.png', img3: './icon_grey/setting-fill.png' }
];
var imgs = document.querySelectorAll(".btn #img1");
console.log(imgs);
var tabbarbtns = document.querySelectorAll(".tabbar .btn");
tabbarbtns.forEach((el, index) => {
el.onclick = function () {
tabbarbtns.forEach((el2) => { el2.style.backgroundColor = "gainsboro"; })
el.style.backgroundColor = "skyblue"
var viewconents = document.querySelectorAll(".viewconent")
viewconents.forEach((el3) => { el3.style.display = "none" })
viewconents[index].style.display = "block"
imgs.forEach((el, index) => { el.src = arr[index].img3 });
imgs[index].src = arr[index].img4;
}
})
</script>
</body>
</html>
