JavaScript-tab栏切换

最新推荐文章于 2024-09-18 18:24:27 发布

小猴子的技术笔记

最新推荐文章于 2024-09-18 18:24:27 发布

阅读量410

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript教程文章标签： JavaScript tab切换

本文链接：https://blog.youkuaiyun.com/MonkeyBrothers/article/details/79302541

JavaScript教程专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用纯JavaScript实现网页上的Tab切换效果，并提供了一个简单的示例代码，包括HTML结构、CSS样式及JavaScript交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.打开网页经常见到鼠标放上去就出现切换的效果，这里用JavaScript模拟写出这种切换效果，比较难，还有一种jQuery方式实现的，大家可以去我文章里面找。接下来把页面骨架搭建好，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>tab切换</title>
	<style type="text/css">
	* {margin: 0;padding: 0;}
	ul {
		list-style-type: none;;
	}
	.box {
		height: 300px;
		width: 400px;
		border: 1px solid #ccc;
		margin: 100px auto;
		overflow: hidden;
	}
	.hd {
		height: 45px;
	}
	.hd span {
		display: inline-block;
		width: 90px;
		background-color: pink;
		line-height: 45px;
		text-align: center;
		cursor: pointer;
	}
	.hd span.current {
		background-color: purple;
	}
	.bd div {
		height: 255px;
		background-color: purple;
		display: none;
	}
	.bd div.current {
		display: block;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="hd" id="hd">
		<ul>
			<span class="current">体育</span>
			<span>娱乐</span>
			<span>百姓</span>
			<span>国家</span>
		</ul>
		</div>
		
		<div class="bd" id="bd">
			<div class="current">我是体育模块</div>
			<div>我是娱乐模块</div>
			<div>我是百姓模块</div>
			<div>我是国家模块</div>
		</div>
	</div>
	
	</script>
</body>
</html>

2.至于截图我就不给大家截图了，直接复制上面代码运行就能够实现，至于JavaScript的功能我不在这里详细介绍，代码中有注释，大家可以详细看一下，全部代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>tab切换</title>
	<style type="text/css">
	* {margin: 0;padding: 0;}
	ul {
		list-style-type: none;;
	}
	.box {
		height: 300px;
		width: 400px;
		border: 1px solid #ccc;
		margin: 100px auto;
		overflow: hidden;
	}
	.hd {
		height: 45px;
	}
	.hd span {
		display: inline-block;
		width: 90px;
		background-color: pink;
		line-height: 45px;
		text-align: center;
		cursor: pointer;
	}
	.hd span.current {
		background-color: purple;
	}
	.bd div {
		height: 255px;
		background-color: purple;
		display: none;
	}
	.bd div.current {
		display: block;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="hd" id="hd">
		<ul>
			<span class="current">体育</span>
			<span>娱乐</span>
			<span>百姓</span>
			<span>国家</span>
		</ul>
		</div>
		
		<div class="bd" id="bd">
			<div class="current">我是体育模块</div>
			<div>我是娱乐模块</div>
			<div>我是百姓模块</div>
			<div>我是国家模块</div>
		</div>
	</div>
	<!-- 编写JavaScript -->
	<script type="text/javascript">
		// 获取spans集合
		var spans = document.querySelectorAll('#hd span');
		var i = 0, len = spans.length;
		// 进行便利给每一个span标签注册鼠标经过事件
		for (; i < len; i++) {
			var span = spans[i];
			// 这里是为了鼠标经过之后，记录下当前的下标，让具体的内容根据这个下标显示
			span.setAttribute('index', i);
			span.onmouseover = function () {
				for (i = 0; i < len; i++) {
					// 先给每一个都取消样式，就是为了防止鼠标离开之后没有停留记录
					spans[i].className = '';
				}
				// 设置当前（也就是鼠标经过的标签位置）的样式
				this.className = 'current';
				// 因为index接受的是一个字符串，所以把他强制转换成int
				var index =parseInt (this.getAttribute('index'));
				var divs = document.querySelectorAll('#bd div');
				var divLen = divs.length;
				// 遍历div
				for (i = 0; i < divLen; i++) {
					var div = divs[i];
					// 给div设置样式
					div.className = '';
				}
				// 给当前要显示的div设置样式
				divs[index].className = 'current';
			}
		}
	</script>
</body>
</html>

3.运行上面代码就能够获得想要的结果，虽然没有详细介绍但是基本的思想概念已经注释了，这是通过JavaScript代码来实现的，还有一篇是通过jQuery来实现的，jQuery实现的比较简单，这个实在看不懂的可以去找我的文章看一下jQuery实现tab栏功能切换的代码。