选项卡点击更换背景样式，点击下一个选项卡前一个添加的背景样式变回原来的样式

Tt哈西

于 2019-01-24 18:42:35 发布

阅读量859

点赞数

分类专栏： js 循环函数文章标签：节点属性更换选项卡背景色

本文链接：https://blog.youkuaiyun.com/weixin_43399733/article/details/86631545

版权

js 同时被 3 个专栏收录

7 篇文章

订阅专栏

循环

3 篇文章

订阅专栏

函数

3 篇文章

订阅专栏

本文介绍了一个简单的网页布局，使用CSS定义了元素样式，并通过JavaScript实现点击事件，使得列表项在两种样式间切换。这不仅展示了CSS的灵活性，还演示了如何使用JavaScript来动态改变页面元素的样式。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;
		}
		li{
			width: 100px;
			height: 30px;
		
			margin-top: 1px;
			color: #fff;
			text-align: center;
		}
		.one{
				background: #f60;
		}
		.two{
			background: blue;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oList=document.getElementById('list');
			var o=oList.children;//获取ul对象的直接后代的DHTML集合(就是获取到三个li的集合) 

			var index=0;
			for(var i=0;i<o.length;i++){
				o[i]._index=i;//给o[i]加一个_index属性；
				o[i].onclick=function(){
					o[index].className='one';//将上一个点击的对象class改为one
					this.className="two";//this指被点击的这个对象
					index=this._index;//获取被点击对象的index值赋给index
				}
			}
		}
	</script>
</head>
<body>
	<ul id="list">
		<li class="one">A</li>
		<li class="one">B</li>
		<li class="one">C</li>
	</ul>
</body>
</html>