JS DOM练习例子02

最新推荐文章于 2023-05-21 17:51:24 发布

一虹

最新推荐文章于 2023-05-21 17:51:24 发布

阅读量257

点赞数

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_43293348/article/details/108827953

版权

JS DOM练习例子02

1.1 实现一亮其他暗效果

利用排他思想实现

效果
在这里插入图片描述
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>1</button>
		<button>2</button>
		<button>3</button>
		<button>4</button>
		<button>5</button>
		<script>
			var btns = document.querySelectorAll('button');
			for(var i = 0;i<btns.length;i++){
    
				btns[i].onclick =function(){
    
					for(var i = 0;i<btns.length;i++){
    
						btns[i].style.backgroundColor='';
					}
					this.style.backgroundColor='pink';
				}
			}
		</script>
	</body>
</html>

1.2 tab栏切换

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style

最低0.47元/天解锁文章

一虹

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS DOM练习例子02

JS DOM练习例子021.1 实现一亮其他暗效果1.2 tab栏切换1.3 事件流使用1.4 图片随鼠标移动1.1 实现一亮其他暗效果利用排他思想实现效果代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>1</butto
复制链接

扫一扫