js实现简单的tab切换

最新推荐文章于 2024-04-16 03:23:57 发布

he626shidizai

最新推荐文章于 2024-04-16 03:23:57 发布

阅读量499

点赞数

分类专栏： web 文章标签： tab切换

本文链接：https://blog.csdn.net/he626shidizai/article/details/88824027

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一些感慨

本人属于小白级别，网上的代码感觉都比较复杂，一堆属性眼花缭乱（对于初学者来说）。

花了很大劲才出现效果，主要是html5不支持一些特性，而网上的教程有的又很老。
还有刚开始写js的时候没有ide不知道错误出在哪里一顿瞎找，吐槽js没有编译器。后来才发现浏览器的检查功能在console中会报错（推荐chrome），这样就可以开心地找bug了。

思路

点卡切换我理解的就是要将切换的tab封装维div，然后修改display属性来确定显示哪个块。
display = "block"显示
display="none"不显示

在我的程序中分为四个块，在判断语句中修改四个块中的属性即可
比较重要的知识点是DOM（Document Object Model）的方法 document.getElementById(‘id’)，根据id获得该拥有该id的对象。

代码

<!DOCTYPE HTML>
<html>
	<head>
		<meta content="text/html" charset="utf-8 "/>
		<title>点卡切换</title>
		<style type="text/css">
			td{
				text-align:center;
				width:100px;
				}
			.over{		<!--鼠标滑过-->
				background-color:#7FFFD4;
				}
			.unover{
				background-color:#FFFFFF;
				}
		</style>
		<script language="javascript">
			function TabChange(t){
				if(t == 1){
					document.getElementById('t1').className= "over";
					document.getElementById('t2').className = "unover";
					document.getElementById('d1').style.display = "block";
					document.getElementById('d2').style.display = "none";
				}else{
					document.getElementById('t2').className = "over";
					document.getElementById('t1').className = "unover";
					document.getElementById('d2').style.display = "block";
					document.getElementById('d1').style.display = "none";
				}
			}
		</script>
	</head>
	<body>
		<table border="1">
			<tr>
				<td class="over" id="t1" onmouseover="TabChange(1)">爱</td>
				<td class="unover" id="t2" onmouseover="TabChange(2)">不爱</td>
			</tr>
			<tr>
				<td colspan="2">
					<div id="d1" style="display:block">爱到海枯石烂</div>
					<div id="d2" style="display:none">有一种爱叫做放手</div>
				</td>
			</tr>
		</table>
	</body>
</html>

运行结果

在这里插入图片描述

he626shidizai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现简单的tab切换

一些感慨本人属于小白级别，晚上的代码感觉都比较复杂（对于初学者来说）。花了很大劲才出现效果，主要是html5不支持一些特性，而网上的教程有的又很老。还有刚开始写js的时候不知道错误出在哪里一顿瞎找，吐槽js没有编译器。后来才发现浏览器的检查功能在console中会报错，这样就可以开心地找bug了。要点点卡切换我理解的就是要将切换的tab封装维div，然后修改display属性来确定显示哪...
复制链接

扫一扫

专栏目录