js实现点击一行变色效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
				height: 30px;
				border: 1px solid #333;
				margin-top: 10px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var aLi = document.getElementsByTagName('li');
				// console.log(aLi);
				for(var i = 0;i < aLi.length; i++){
					aLi[i].index = true;
					aLi[i].onclick = function(){
						if(this.index){
							this.style.background = 'red';
							this.index = false;
						}else{
							this.style.background = '#fff';
							this.index = true;
						}
						
					}
				}
			}
		</script>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

 

posted @   JackieDYH  阅读(38)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示