javascript实战——列表切换

最新推荐文章于 2021-11-10 12:57:10 发布

shaonian1996

最新推荐文章于 2021-11-10 12:57:10 发布

阅读量957

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_41179401/article/details/79413551

版权

javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

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.οnlοad=function(){
	var list_1=document.getElementById('list_1');
	var list_2=document.getElementById('list_2');
		list_1.οnclick=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.οnclick=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;
}

shaonian1996

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实战——列表切换

javascript实战——列表切换图示：1：2：问题：1：列表图片切换；2：下面内容区排版变化；思路：1：列表图片切换：通过background-position改变；2：下面内容区排版变化：通过改变class值；第一步：原始排版html:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; ...
复制链接

扫一扫

专栏目录