day38-Mobile Tab Navigation（手机tab栏导航切换）

50 天学习 50 个项目 - HTMLCSS and JavaScript

day38-Mobile Tab Navigation（手机tab栏导航切换）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Mobile Tab Navigation</title><!-- 图标库 --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="crossorigin="anonymous" /><link rel="stylesheet" href="style.css" />
</head><body><!-- 手机 --><div class="phone"><!-- 图片 --><img src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80"alt="home" class="content show"><img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"alt="work" class="content"><img src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80"alt="blog" class="content"><img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"alt="about" class="content"><!-- 手机底部导航 --><nav><ul><li class="active"><i class="fas fa-home"></i><p>首页</p></li><li><i class="fas fa-box"></i><p>工作</p></li><li><i class="fas fa-book-open"></i><p>博客</p></li><li><i class="fas fa-users"></i><p>关于</p></li></ul></nav></div><script src="script.js"></script>
</body></html>

style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');* {box-sizing: border-box;
}body {background-image: linear-gradient(to right,blue 0%,skyblue 50%,blue 100%);font-family: 'Open Sans', sans-serif;/* 子元素居中 */display: flex;align-items: center;justify-content: center;height: 100vh;margin: 0;
}/* 手机 */
.phone {position: relative;/* 超出部分隐藏 */overflow: hidden;border: 5px solid #eee;border-radius: 15px;height: 600px;width: 340px;
}/* 图片 */
.phone .content {/* 隐藏 */opacity: 0;/* 图片覆盖手机 */object-fit: cover;position: absolute;top: 0;left: 0;height: calc(100% - 60px);width: 100%;transition: opacity 0.4s ease;
}/* 显示 */
.phone .content.show {opacity: 1;
}/* 底部导航 */
nav {position: absolute;bottom: 0;left: 0;margin-top: -5px;width: 100%;
}nav ul {background-color: #fff;display: flex;/* 去除小圆点 */list-style-type: none;padding: 0;margin: 0;height: 60px;
}nav li {color: #777;cursor: pointer;/* flex 平分每一项 */flex: 1;padding: 10px;text-align: center;
}nav ul li p {font-size: 12px;margin: 2px 0;
}nav ul li:hover,
nav ul li.active {color: blue;
}

script.js

// 重点 flex classList 注意：在html中一定要使用active和show各一个，否则js中8，9行报错
// 图片用的是定位和opacity
// 1.获取元素节点
const contents = document.querySelectorAll('.content')//所有图片
const listItems = document.querySelectorAll('nav ul li')//所有导航项
// 2.遍历绑定 点击事件
listItems.forEach((item, idx) => {item.addEventListener('click', () => {document.querySelector('nav ul li.active').classList.remove('active')document.querySelector('.content.show').classList.remove('show')// console.log(this);//this为window 由于箭头函数的原因item.classList.add('active')contents[idx].classList.add('show')})
})