tab栏切换-模拟手机随着tab切换视口

案例分析:

我们可以模拟手机的tab切换,学习如何使用js制作网页的tab切换,即点击下面按钮,上面视口显示相应内容,,按钮的图片也随之改变.

那么我们具体怎么实现的呢?

首先,我们先整体将HTML结构写出来

1, 整个页面用class="contain"的div标识,contain分为上下结构,上面为view部分,下面是tabbar部分
2, 上面的view有四个表示页面class="viewcontent"的div
3, 下面的tabbar有四个表示按钮class="btn"的div
4, 下面表示按钮的div中又分别有一张图片和内容文字,与上面视口viewcontent相对应

<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 src="./img/home2.webp" alt="">
			</div>
			<div class="btn">
				<span>car</span>
				<img src="./img/car1.webp" alt="">
			</div>
			<div class="btn">
				<span>my</span>
				<img src="./img/my1.webp" alt="">
			</div>
			<div class="btn">
				<span>set</span>
				<img src="./img/set1.webp" alt="">
			</div>
		</div>
	</div>

然后设置模拟手机设置CSS基本属性

<style>
		.content {
			width: 100px;	/*设置长*/
			height: 150px;	/*设置宽*/
			margin: 10px	/*设置外边距*/
			
		}
		.view {
			width: 100px;
			height: 100px;
		}
		.tabbar {
			width: 100px;
			height: 50px;
			display: flex;		/*将下面按钮条设置为弹性盒子,方便添加同一样式*/
			justify-content: flex-start;	/*主轴排列方式*/
			flex-wrap: nowrap;	/*不换行*/
		}
		.btn {
			width: 25%;	/*宽度为父盒子的25%,弹性盒子中相当于平均分*/
			background-color: gainsboro;
			cursor: pointer;	/*鼠标手势*/
		}
		.btn:first-child {
			background-color: skyblue;	/*为第一个按钮设置默认背景色*/
		}
		.viewconent {
			width: 100px;
			height: 100px;
			display: none;	/*默认所有视口全部隐藏*/
			text-align: center;/*文字水平居中*/
			padding-top: 20px;
			background-color: lightseagreen;
		}
		.viewconent:first-child {
			display: block;	/*设置第一个视口为默认视口*/
		}
		img {		/*设置按钮图片*/
			width: 20px;
			height: 20px;
			display: block;
		}
	</style>

然后添加JavaScript脚本

那么JavaScript将怎么设计呢?
1, 获取所有按钮,获取所有视口,他们应该是对应的.添加两个数组,第一个数组保存按钮默认图片地址,第二个数组保存点击按钮图片地址
2, 循环为所有按钮添加点击事件
3, 事件为点击之后,将所有的viewcontent的display设置为none
4, 点击按钮对应位置的视口的display转换为block
5, 所有的按钮图片设置为默认的图片地址
6, 点击按钮的图片地址对应改变

<script>
	var tabbarbtns = document.querySelectorAll(".tabbar .btn")
	var imgfirstarr=["./img/home1.webp","./img/car1.webp","./img/my1.webp","./img/set1.webp"]
	var imgsecondarr=["./img/home2.webp","./img/car2.webp","./img/my2.webp","./img/set2.webp"]
	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"
			// 清除所有图片添加的格式
			tabbarbtns.forEach((el,index)=>{
				el.children[1].src=imgfirstarr[index]
			})
			//通过点击改变按钮的图片src
			el.children[1].src=imgsecondarr[index];
		}
	})
</script>

标签：el,img,webp,视口,切换,tab,按钮,display
来源： https://www.cnblogs.com/xuawei/p/16479126.html