点击改变背景色，其他的恢复原背景色。

最新推荐文章于 2022-08-19 00:08:26 发布

Lv_SFeng

最新推荐文章于 2022-08-19 00:08:26 发布

阅读量1.1k

点赞数 1

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

本文链接：https://blog.csdn.net/Lv_SFeng/article/details/106649364

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

点击一个元素，改变背景色。其他的元素就会变回原样。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#demo {
				width: 300px;
				height: 500px;
				border: 1px solid red;
			}
			li {
				list-style: none;
			}
			.wrap .item {
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border: 1px solid aqua;
				margin: 5px;
				cursor: pointer;
				/* background: yellow; */
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<ul class="wrap">
				<li id="item" class="item">1</li>
				<li class="item">2</li>
				<li class="item">3</li>
				<li class="item">4</li>
				<li class="item">5</li>
				<li class="item">6</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var lis = document.getElementsByClassName('item'); //获取所有class为item的元素。
			//console.log(lis);	
			//console.log(typeof lis);	//object类型
			
			for(var i = 0; i < lis.length; i++){
			   lis[i].index = i;//给对象中的li赋上索引值,这是难点，比较难理解！		  
			   lis[i].onclick = function () { //点击会发生的变色函数。
					//alert(this.index);					
					bg(this.index);  //调用下面的函数改变背景颜色。
					
					for(var j = 0; j < lis.length; j++){  //遍历所有的li元素。
						if(j != this.index){  //将除了点击的li元素外的元素的背景变为白色。
							lis[j].style.background = 'white';
						}
					}
				}	
			}
			 
			function bg(i) {
				lis[i].style.background = 'yellow'; //改变元素的背景色。
			} 
			
		</script>
	</body>
</html>

Lv_SFeng

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
点击改变背景色，其他的恢复原背景色。

点击一个元素，改变背景色。其他的元素就会变回原样。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #demo { width: 300px; height: 500px; border: 1px solid red; } li {
复制链接

扫一扫

专栏目录