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;
}