javascript实战——列表切换

最新推荐文章于 2024-10-01 16:04:47 发布

原创最新推荐文章于 2024-10-01 16:04:47 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的列表切换效果案例。通过更改背景位置来切换列表图片，并通过修改元素的class值来调整下方内容区域的布局。文章详细介绍了HTML、CSS及JavaScript代码的实现过程。

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

javascript实战——列表切换

图示：

1：

2：

问题：

1：列表图片切换；

2：下面内容区排版变化；

思路：

1：列表图片切换：通过background-position改变；

2：下面内容区排版变化：通过改变class值；

第一步：原始排版

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>列表切换</title>
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="container">
	<div class="list_box">
		<ul class="list">
			<li class="list_1" id="list_1" style="background-position: left bottom"></li>
			<li class="list_2" id="list_2" style="background-position: right bottom"></li>
		</ul>
	</div>
</div>
</body>
</html>

css:

*{
	margin:0;
	padding: 0;
}
ul{
	list-style-type: none;
}
#container{
	width: 780px;
	height: auto;
	margin:0 auto;
}
.list_box{
	margin:1 auto;
	width: 700px;
	height: 42px;
	border-bottom: 1px solid red;
}
.list{
	float: right;
	padding-top: 10px;	
}
.list_box ul li{
	cursor: pointer;
	width:36px;
	height: 30px;
	float: left;
	display: block;
	background-image: url('image/list2.png')
}

list2.png:

第二步：在css样式表里添加另一个class属性：

.changeList .list-2-v{height: 170px;}当触发点击事件是改变内容区的class值。

第三部：设置js:

window.onload=function(){
	var list_1=document.getElementById('list_1');
	var list_2=document.getElementById('list_2');
		list_1.onclick=function(){
		// 列表切换
		this.style.backgroundPosition='left bottom';
		var list_2=document.getElementById('list_2');
		list_2.style.backgroundPosition='right bottom';
		// 内容格式切换
		var list_2=getClass('list-2-v');
		for(var i=0;i<list_2.length;i++){
			list_2[i].className='list-1-o';
		}
	}
	list_2.onclick=function(){
		// 列表切换
		var list_1=document.getElementById('list_1');
		list_1.style.backgroundPosition='left top';
		this.style.backgroundPosition='right top';
		// 内容格式切换
		var list_1=getClass('list-1-o');
		for(var i=0;i<list_1.length;i++){
			list_1[i].className='list-2-v';
		}
	}
}
// 通过class值获取一类节点
function getClass(className){
	var temp=[];
	var all=document.getElementsByTagName('*');
	for(var i=0;i<all.length;i++){
		if(all[i].className==className){
			temp.push(all[i]);
		}
	}
	return temp;
}