tab栏切换做轮播图及单纯内容切换-CSDN博客

本文链接：https://blog.csdn.net/2301_79753267/article/details/147163507

ok 我们由简入繁先来做简单的内容切换上效果图

模块一：基础tab栏切换

HTML

先来分析页面整体框架外面一个大的div(类名为tab)
里面分为上下两个div(类名分别为title和content)
上面的div包含三个标题下面的div包含三个内容

<div class="tab">
		<div class="title">
			<span class="active">标题一</span>
			<span>标题二</span>
			<span>标题三</span>
		</div>

		<div class="content">
			<p class="select">内容一</p>
			<p>内容二</p>
			<p>内容三</p>

		</div>
	</div>

CSS

通配符选择器是标配清除标签原有的外边距和内边距
给整个div设一个宽度并让他居中显示
给上面的div(类名为title)里的span标签设置浮动让他们转换成块状元素随后添加一些属性这里要注意的是本身大盒子的宽度是600px，这里有三个span标签且宽度是200px，所以必须要加上怪异盒子box-sizing：border-box 使三个span标签同行
单独给第一个span标签(类名为active)添加上被选中的样式
给下面的div(类名为content)里的p标签先设置隐藏
单独给第一个p标签加类名select 设置显示

<style type="text/css">
        *{
			margin: 0;
			padding: 0;
		}
		.tab{
			width: 600px;
			margin: 100px auto;
		}
		.title span{
			float: left;
			width: 200px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border: 1px solid #000;
			box-sizing: border-box;
		}
		.title .active{
			background: orange;
			color: white;
		}
		.content p{
			width: 600px;
			height: 200px;
			line-height: 200px;
			text-align: center;
			border: 1px solid #000;
			display: none;
		}
		.content .select{
			display: block;
		}
</style>

JS

首先来整理一下js部分的思路

我们要完成的是点击对应标题要出现对应的内容无论干什么第一步一定是先获取对象

获取所有span标签
获取所有p标签
利用for循环，遍历span标签
给每一个span标签添加点击事件
重点来了！首先我们希望点击到span标签上的时候，背景颜色会变成橙色而且字体颜色变成白色，那就要给span标签加上我们准备好的类名active，这时候this指向的是span[i]
加上这句this.className='active'之后，我们就发现了一个bug，就是点击标题二的时候标题一的背景颜色和字体颜色还在！这时候我们就要注意，一定要清空原来有active类的标签！！！
直接获取有active类名的标签并且把他的类名给清空但是注意顺序！我们要先清空再给点击的span标签添加类名
有了以上两步的操作下面的内容切换也是一样的先清空已有select类名的p标签再给其他p标签添加select类名就完成了！
在这特别注意一点！for循环里面的let不要写成var，var没有块级作用域，瞬间执行完for循环，i到达3，点击事件里的i只能取3，会报错，如果用了var可以这样修改(如下图所示)

<script type="text/javascript">
		let spans = document.querySelectorAll('span')
		let ps = document.querySelectorAll('p')
		for(let i = 0;i < spans.length;i++){
			spans[i].onclick= function(){
				//先获取到原来有active类名的给他清空
				document.querySelector(".active").className=''
				document.querySelector(".select").className=""
				this.className='active'
				ps[i].className='select'
			}		
		}
		
	</script>

模块二：简易轮播图

图片版本(和模块一非常雷同就不过多分析了)

完整代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.key span{
			width: 30px;
			height: 30px;
			list-style: 30px;
			text-align: center;
			float: left;
			background: #ccc;
			border-radius: 50%;
			margin: 10px;
		}
		.key .select{
			background: orange;
		}
		.image img{
			display: none;
			width: 600px;
		}
		.image .active{
			display: block;
		}
		.main{
			position: relative;
			width: 600px;
			margin: 30px auto;
		}
		.key{
			position: absolute;
			bottom: 0px;
			right: 0px;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="key">
			<span class="select">1</span>
			<span>2</span>
			<span>3</span>

		</div>
		<div class="image">
			<img src="1.jpg" class="active">
			<img src="2.jpg" >
			<img src="3.jpg">
		</div>
	</div>
	<script type="text/javascript">
		let spans = document.querySelectorAll('span')
		let imgs = document.querySelectorAll('img')
		for(let i = 0;i < spans.length;i++){
			spans[i].onclick=function(){
				document.querySelector(".active").className=""
				document.querySelector(".select").className=""
				this.className="select"
				imgs[i].className="active"
			}
		}
	</script>
</body>
</html>

背景图片版本

HTML

整体就是一个大div包一个小div，放三个span标签即可

<div class="banner">
		<div class="icon">
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>

	</div>

CSS

这里唯一要说的就是使用定位将小div放到页面的右下角

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.banner{
			width: 670px;
			height: 280px;
			margin: 0 auto;
			background: url(1.jpg);
			position: relative;
		}
		.icon{
			position: absolute;
			right: 10px;
			bottom: 10px;
			height: 30px;
		}
		.icon span{
			width: 30px;
			height: 30px;
			line-height: 30px;
			float: left;
			border-radius: 50px;
			background: rgba(0, 0, 0, 0.4);
			margin-left: 10px;
			text-align: center;
			color: white;
			cursor: pointer;
		}
	</style>

JS

第一步仍然是获取元素把大小div都获取到
利用for循环遍历span标签，添加点击事件
注意属性要使用小驼峰命名法backgroundImage
因为我的图片命名为1.jpg/2.jpg/3.jpg所以再url中使用模板字符串给他换上

<script type="text/javascript">
		let spans = document.querySelectorAll('span')
		let banner = document.querySelector('.banner')
		for(let i = 0;i < spans.length;i++){
			spans[i].onclick=function(){
				banner.style.backgroundImage=`url(${this.innerText}.jpg)`
			}
		}
	</script>