购物车

1. 全选按钮

1.1 将所有的单选按钮和全选按钮保持一致，并且所有的全选按钮也保持一致

1.2 将总件数变成单选按钮的个数

1.3 计算总计

2. 单选按钮功能：

2.1 判断单选按钮的选中个数，控制全选按钮是否被选中

2.2 需要计算当前的合计，以及选中的件数数

3. 加号按钮功能的实现

4. 减法按钮功能的实现

5. 删除功能

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车</title>
	<link rel="stylesheet" href="../css/style.css">
</head>
<body>
	<div class="catbox">
  <table id="cartTable">
    <thead>
    	<tr>
        	<th><label>
           		<input class="check-all check" type="checkbox"/>&nbsp;&nbsp;全选</label></th>
        	<th>商品</th>
        	<th>单价</th>
        	<th>数量</th>
        	<th>小计</th>
        	<th>操作</th>
    	</tr>
    </thead>
    <tbody>
    	<tr>
        	<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
        	<td class="goods"><img src="../images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
        	<td class="price">5999.88</td>
        	<td class="count"><span class="reduce">-</span>
        	<input class="count-input" type="text" value="1"/>
        	<span class="add">+</span></td>
        	<td class="subtotal">5999.88</td>
        	<td class="operation"><span class="delete">删除</span></td>
    	</tr>
    	<tr>
        	<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
        	<td class="goods"><img src="../images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
        	<td class="price">3888.50</td>
        	<td class="count"><span class="reduce">-</span>
          		<input class="count-input" type="text" value="1"/>
          		<span class="add">+</span></td>
        	<td class="subtotal">3888.50</td>
        	<td class="operation"><span class="delete">删除</span></td>
    	</tr>
    	<tr>
        	<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
        	<td class="goods"><img src="../images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
        	<td class="price">1428.50</td>
        	<td class="count"><span class="reduce">-</span>
        		<input class="count-input" type="text" value="1"/>
        		<span class="add">+</span></td>
        	<td class="subtotal">1428.50</td>
        	<td class="operation"><span class="delete">删除</span></td>
    	</tr>
    	<tr>
        	<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
        	<td class="goods"><img src="../images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
        	<td class="price">640.60</td>
        	<td class="count"><span class="reduce">-</span>
          		<input class="count-input" type="text" value="1"/>
          		<span class="add">+</span></td>
        	<td class="subtotal">640.60</td>
        	<td class="operation"><span class="delete">删除</span></td>
    	</tr>
    </tbody>
  </table>
  <div class="foot" id="foot">
    <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;&nbsp;全选</label>
    <a class="fl delete" id="deleteAll" >删除</a>
    <div class="fr closing" >结 算</div>
    <input type="hidden" id="cartTotalPrice" />
    <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
    <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
    <div class="selected-view">
      <div id="selectedViewList" class="clearfix">
        <div><img src="images/1.jpg"><span>取消选择</span></div>
      </div>
      <span class="arrow">◆<span>◆</span></span> </div>
  </div>
</div>
	<script>
	//1.全选按钮
	//1.1将所有的单选按钮和全选按钮保持一致，   并且所有的全选按钮也保持一致
	//1.2将总件数变成单选按钮的个数
	//1.3计算总计
		window.onload=function(){
		//找到当前页面上所有的全选按钮
			var checkAlls=document.getElementsByClassName('check-all');
		//找到当前页面上所有的单选按钮
			var checkOnes=document.getElementsByClassName('check-one');
		//找到当前页面上放置总件数的标签(sapn)
			var selectedTotal=document.getElementById('selectedTotal');
		//找到当前页面上放置 每行 小计 的标签
			var subtotal=document.getElementsByClassName('subtotal');
		//找到当前页面中放置 合计 的标签
			var priceTotal=document.getElementById('priceTotal');
			for(var n=0;n<checkAlls.length;n++){
				checkAlls[n].onchange=function(){
			//让所有的单选按钮保持一致
					for(var j=0;j<checkOnes.length;j++){
						checkOnes[j].checked=this.checked;
					}
			//让所有的全选按钮保持一致
					for(var j=0;j<checkAlls.length;j++){
						checkAlls[j].checked=this.checked;
					}
			//根据全选是否选中来判断件数是多少，  如果选中了，件数=单选按钮的个数，如果没有选中，件数=0；
					if (this.checked==true) {
						selectedTotal.innerHTML=checkOnes.length;
			//计算总计， 1.先找到每一行的小计  2.加和到一起
						var sum=0;
						for(var n=0;n<subtotal.length;n++){
							sum=sum+parseFloat(subtotal[n].innerHTML);
						}
						priceTotal.innerHTML=sum.toFixed(2);
					}else{
						selectedTotal.innerHTML=0;
						priceTotal.innerHTML=0;
					}
				}
			}
			//单选按钮功能：
			//1. 判断单选按钮的选中个数，控制全选按钮是否被选中
			//2. 需要计算当前的合计，以及选中的件数数
			for(var n=0;n<checkOnes.length;n++){
				checkOnes[n].onchange=function(){
					var sum=0;//用来放置选中单选按钮的个数
					var total=0;//用来放置合计
					for(var j=0;j<checkOnes.length;j++){
						if (checkOnes[j].checked==true) {
							sum++;
							total=total+parseFloat(subtotal[j].innerHTML);
						}
					}
			//根据单选按钮选中的个数，判断全选按钮是否需要被选中
					if (sum==checkOnes.length) {
						for(var n=0;n<checkAlls.length;n++){
							checkAlls[n].checked=true;
						}
					}else{
						for(var n=0;n<checkAlls.length;n++){
							checkAlls[n].checked=false;
						}
					}
					selectedTotal.innerHTML=sum;
					priceTotal.innerHTML=total.toFixed(2);
				}
			}
	//加号按钮功能的实现
		//找到所有的加法按钮
			var adds=document.getElementsByClassName("add");
		//找到所有的input框
			var countInputs=document.getElementsByClassName('count-input');
		//找到所有的单价按钮
			var prices=document.getElementsByClassName('price');
			for(var n=0;n<adds.length;n++){
				adds[n].index=n;
				adds[n].onclick=function(){
				//拿到所对应的input框的数量
					//console.log(this.index)
					var num=countInputs[this.index].value;
					num++;
					countInputs[this.index].value=num;
					//找到对应的单价
					var price=prices[this.index].innerHTML;
					//console.log(price)
					var sum=price*num;
					subtotal[this.index].innerHTML=sum.toFixed(2);
				//如果它对应的合计checked=true,则合计也要发生变化
					if (checkOnes[this.index]) {
						var total=0;
						for(var j=0;j<checkOnes.length;j++){
							if (checkOnes[j].checked) {
								total+=parseFloat(subtotal[j].innerHTML)
							}
						}
						priceTotal.innerHTML=total.toFixed(2);
					}
				}
			}
	//减法按钮功能的实现
			var reduces=document.getElementsByClassName('reduce');
			for(var n=0;n<reduces.length;n++){
				reduces[n].index=n;
				reduces[n].onclick=function(){
					var num=countInputs[this.index].value;
					if (num>1) {
						num--;
					}else{
						alert("亲，不能再减了");
					}
					countInputs[this.index].value=num;
					var price=prices[this.index].innerHTML;
					var sum=price*num;
					subtotal[this.index].innerHTML=sum.toFixed(2);
					if (checkOnes[this.index]) {
						var total=0;
						for(var j=0;j<checkOnes.length;j++){
							if (checkOnes[j].checked) {
								total+=parseFloat(subtotal[j].innerHTML)
							}
						}
						priceTotal.innerHTML=total.toFixed(2);
					}
				}
			}
		//删除功能
			var deletes=document.getElementsByClassName('delete');
			for(var n=0;n<deletes.length;n++){
				deletes[n].onclick=function(){
					var tr=this.parentNode.parentNode;
					var table=tr.parentNode;
					table.removeChild(tr);
					var total=0;
					var sum=0;
					for(var j=0;j<checkOnes.length;j++){
						if (checkOnes[j].checked) {
							sum++;
							total+=parseFloat(subtotal[j].innerHTML);
						}
					}
                                        for(var n=0;n<adds.length;n++){
						adds[n].index=n;
					}
					priceTotal.innerHTML=total.toFixed(2);
					selectedTotal.innerHTML=sum;
				}
			}
		}
	</script>
</body>
</html>

优化（封装了一些函数）后的：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车优化版</title>
	<link rel="stylesheet" href="../css/style.css">
</head>
	<body>
	<div class="catbox">
  <table id="cartTable">
    <thead>
    	<tr>
        	<th><label>
           		<input class="check-all check" type="checkbox"/>&nbsp;&nbsp;全选</label></th>
        	<th>商品</th>
        	<th>单价</th>
        	<th>数量</th>
        	<th>小计</th>
        	<th>操作</th>
    	</tr>
    </thead>
    <tbody>
    	<tr>
        	<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
        	<td class="goods"><img src="../images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
        	<td class="price">5999.88</td>
        	<td class="count"><span class="reduce">-</span>
        	<input class="count-input" type="text" value="1"/>
        	<span class="add">+</span></td>
        	<td class="subtotal">5999.88</td>
        	<td class="operation"><span class="delete">删除</span></td>
    	</tr>
    	<tr>
        	<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
        	<td class="goods"><img src="../images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
        	<td class="price">3888.50</td>
        	<td class="count"><span class="reduce">-</span>
          		<input class="count-input" type="text" value="1"/>
          		<span class="add">+</span></td>
        	<td class="subtotal">3888.50</td>
        	<td class="operation"><span class="delete">删除</span></td>
    	</tr>
    	<tr>
        	<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
        	<td class="goods"><img src="../images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
        	<td class="price">1428.50</td>
        	<td class="count"><span class="reduce">-</span>
        		<input class="count-input" type="text" value="1"/>
        		<span class="add">+</span></td>
        	<td class="subtotal">1428.50</td>
        	<td class="operation"><span class="delete">删除</span></td>
    	</tr>
    	<tr>
        	<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
        	<td class="goods"><img src="../images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
        	<td class="price">640.60</td>
        	<td class="count"><span class="reduce">-</span>
          		<input class="count-input" type="text" value="1"/>
          		<span class="add">+</span></td>
        	<td class="subtotal">640.60</td>
        	<td class="operation"><span class="delete">删除</span></td>
    	</tr>
    </tbody>
  </table>
  <div class="foot" id="foot">
    <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;&nbsp;全选</label>
    <a class="fl delete0" id="deleteAll" >删除</a>
    <div class="fr closing" >结 算</div>
    <input type="hidden" id="cartTotalPrice" />
    <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
    <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
    <div class="selected-view">
      <div id="selectedViewList" class="clearfix">
        <div><img src="images/1.jpg"><span>取消选择</span></div>
      </div>
      <span class="arrow">◆<span>◆</span></span> </div>
  	</div>
	<script>
		//1. 全选按钮的功能
		window.onload=function(){
			var checkAlls=document.getElementsByClassName('check-all');//多选按钮
			var checkOnes=document.getElementsByClassName('check-one');//单选按钮
			for(var n=0;n<checkAlls.length;n++){
				checkAlls[n].onchange=function(){
					for(var j=0;j<checkOnes.length;j++){
						checkOnes[j].checked=this.checked;
					}
					checked(this.checked);
					count();//这个地方不需要接收sum值
				}
			}
		//2.单选按钮的功能
			for(var n=0;n<checkOnes.length;n++){
				checkOnes[n].onchange=function(){
					count();
					var Sum=count();//return将sum这个值返回出来，用一个新的变量接收一下；
					var t=Sum==checkOnes.length;
					checked(t);
				}
			}
		//3.加减按钮的功能
			var adds=document.getElementsByClassName('add');
			var reduces=document.getElementsByClassName('reduce'); 
			var countInputs=document.getElementsByClassName('count-input');
			var subtotal=document.getElementsByClassName('subtotal');
			var prices=document.getElementsByClassName('price');
			for(var n=0;n<adds.length;n++){
				adds[n].index=n;
				reduces[n].index=n;
				adds[n].onclick=function(){
					var num=countInputs[this.index].value;
					num++;
					xiaoji(num,this.index);
					count();
				}
				reduces[n].onclick=function(){
					var num=countInputs[this.index].value;
					if (num==0) {
						num=0;
					}else{
						num--;
					}
					xiaoji(num,this.index);
					count();
				}
			}
		//删除功能的实现
			var deletes=document.getElementsByClassName('delete');
			for(var n=0;n<deletes.length;n++){
				deletes[n].onclick=function(){
					var tr=this.parentNode.parentNode;
					var tbody=tr.parentNode;
					tbody.removeChild(tr)
					count();
					for(var j=0;j<adds.length;j++){
						adds[j].index=j;
						reduces[j].index=j;
					}
					var tbody=document.getElementsByTagName('tbody')[0];
					var trs=tbody.getElementsByTagName('tr');
					if (trs.length==0) {
						var creatTr=document.createElement('tr');
						creatTr.innerHTML="<span class='sdf'>购物车已清空</span>";
						creatTr.className="s";
						tbody.append(creatTr);
					}
				}
			}
		//删除全部
			var deleteAll=document.getElementById('deleteAll');
			deleteAll.onclick=function(){
				var tbody=document.getElementsByTagName('tbody')[0];
				var trs=tbody.getElementsByTagName('tr');
				var x=trs.length;
				for(var n=0;n<trs.length;n++){
					tbody.removeChild(trs[n])
					n--;
				}
				length();
			}
		//结算功能
			var close=document.getElementsByClassName('closing')[0];
			close.onclick=function(){
				count();
				var x=confirm("您一共消费"+priceTotal.innerHTML+"元，"+"是否去付款")
			}
			function length(){
				length();
			}
		//函数四：判断数组的长度，提示购物车清空
			function length(){
				var tbody=document.getElementsByTagName('tbody')[0];
				var tr=tbody.getElementsByTagName('tr');
				if (tr.length==0) {
					var creatTr=document.createElement('tr');
					creatTr.innerHTML="<span class='sdf'>购物车已清空</span>";
					creatTr.className="s";
					tbody.append(creatTr);
				}
			}
		//函数三：小计的计算
			function xiaoji(num,index){
				countInputs[index].value=num;
				var sum1=num*prices[index].innerHTML;
				subtotal[index].innerHTML=sum1;
			}
		//函数二：控制全选按钮的选中与否
			function checked(x){
				for(var n=0;n<checkAlls.length;n++){
					checkAlls[n].checked=x;
				}
			}
		//函数一：//统计数量和合计
			function count(){
				var selectedTotal=document.getElementById('selectedTotal');
				var subtotal=document.getElementsByClassName('subtotal');//小计
				var priceTotal=document.getElementById('priceTotal');//合计
				var sum=0;//统计单选按钮被选中的数量
				var total=0;
				for(var n=0;n<checkOnes.length;n++){
					if (checkOnes[n].checked==true) {
						sum++;
						total+=parseFloat(subtotal[n].innerHTML)
						//通过遍历的方式，找到对应的元素
						// var tr=checkOnes[n].parentNode.parentNode;
						// var td=tr.getElementsByClassName('subtotal')[0];
						// total=total+parseFloat(td.innerHTML);
					}
				}
				selectedTotal.innerHTML=sum;
				priceTotal.innerHTML=total.toFixed(2);
				return sum;//将sum值返回出来
			}
		}
	</script>
</body>
</html>

css代码

@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a{color:#666;text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;border:0;}
body{color:#666;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
*html .clearfix{height:1%}
.clearfix{display:block}
*+html .clearfix{min-height:1%}
.fl{float:left;}
.fr{float:right;}
/*素材家园 - www.sucaijiayuan.com*/
.catbox{width:940px;margin:100px auto;}
.catbox table{text-align:center;width:100%;}
.catbox table th,.catbox table td{border:1px solid #CADEFF;}
.catbox table th{background:#e2f2ff;border-top:3px solid #a7cbff;height:30px;}
.catbox table td{padding:10px;color:#444;}
.catbox table tbody tr:hover{background:RGB(238,246,255);}
.checkbox{width:60px;}
.check-all{ vertical-align:middle;}
.goods{width:300px;}
.goods span{width:180px;margin-top:20px;text-align:left;float:left;}
.goods img{width:100px;height:80px;margin-right:10px;float:left;}
.price{width:130px;}
.count{width:90px;}
.count .add, .count input, .count .reduce{float:left;margin-right:-1px;position:relative;z-index:0;}
.count .add, .count .reduce{height:23px;width:17px;border:1px solid #e5e5e5;background:#f0f0f0;text-align:center;line-height:23px;color:#444;}
.count .add:hover, .count .reduce:hover{color:#f50;z-index:3;border-color:#f60;cursor:pointer;}
.count input{width:50px;height:15px;line-height:15px;border:1px solid #aaa;color:#343434;text-align:center;padding:4px 0;background-color:#fff;z-index:2;}
.subtotal{width:150px;color:red;font-weight:bold;}
.operation span:hover,a:hover{cursor:pointer;color:red;text-decoration:underline;}

.foot{margin-top:0px;color:#666;height:48px;border:1px solid #c8c8c8;border-top:0;background-color:#eaeaea;background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));position:relative;z-index:8;}
.foot div, .foot a{line-height:48px;height:48px;}
.foot .select-all{width:80px;height:48px;line-height:48px;color:#666;text-align:center;}
.foot .delete{padding-left:10px;}
.foot .closing{border-left:1px solid #c8c8c8;width:103px;text-align:center;color:#666;font-weight:bold;cursor:pointer;background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));}
.foot .closing:hover{background-image:linear-gradient(RGB(226,226,226),RGB(241,241,241));color:#333;}
.foot .total{margin:0 20px;cursor:pointer;}
.foot  #priceTotal, .foot #selectedTotal{color:red;font-family:"Microsoft Yahei";font-weight:bold;}
.foot .selected{cursor:pointer;}
.foot .selected .arrow{position:relative;top:-3px;margin-left:3px;}
.foot .selected .down{position:relative;top:3px;display:none;}
.show .selected .down{display:inline;}
.show .selected .up{display:none;}
.foot .selected:hover .arrow{color:red;}
.foot .selected-view{width:938px;border:1px solid #c8c8c8;position:absolute;height:auto;background:#ffffff;z-index:9;bottom:48px;left:-1px;display:none;}
.show .selected-view{display:block;}
.foot .selected-view div{height:auto;}
.foot .selected-view .arrow{font-size:16px;line-height:100%;color:#c8c8c8;position:absolute;right:330px;bottom:-9px;}
.foot .selected-view .arrow span{color:#ffffff;position:absolute;left:0px;bottom:1px;}

#selectedViewList{padding:10px 20px 10px 20px;}
#selectedViewList div{display:inline-block;position:relative;width:100px;height:80px;border:1px solid #ccc;margin:10px;float:left;}
#selectedViewList div img{width:100px;height:80px;margin-right:10px;float:left;}
#selectedViewList div span{display:none;color:#ffffff;font-size:12px;position:absolute;top:0px;right:0px;width:60px;height:18px;line-height:18px;text-align:center;background:#000;cursor:pointer;}
#selectedViewList div:hover span{display:block;}

原生js实现楼梯导航的制作

这是一个固定楼层导航栏，要实现三个功能：

其一：固定导航栏滚动到一定位置出现，否则就消失

其二：当我们滚动页面的时候，滚动到相应的位置时，相应的楼层导航栏的位置也要进行改变

其三：当我们点击楼层导航的时候，窗口能够自动滚动到相应的位置

然后还要强调一个知识点offset().top,这个是指元素与document 的上边的距离

上面三个功能的思路：

1.对应其一，根据上文描述，其思路就是判断窗口的滚动高度(document.documentElement.scrollTop)是否大于一定高度，大于就把固定导航栏显示，否则就隐藏

2.对应其二，其思路是窗口滚动触发事件，分别得到窗口滚动的高度，以及每个导航对应内容的高度，依次判断窗口滚动的高度是否大于导航栏对应内容的高度，如果符合条件的话，固定导航栏就滚动到相应的位置。

3.对应其三，其思路是点击导航栏时触发事件，得到导航栏选中对象的index值或者是能够辨别内容的值，然后就对应滚动到对应内容区域的顶部

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>楼梯导航</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#header{
			height: 600px;
			font-size: 100px;
			background-color: red;
			text-align: center;
			line-height: 600px;
		}
		#leftNav{
			position: fixed;
			top: 220px;
			left: 0;
			display: none;
		}
		#leftNav li{
			width: 50px;
			height: 50px;
			list-style: none;
			border: 1px solid #ccc;
			text-align: center;
			line-height: 50px;
		}
		#leftNav .active{
			background-color: gray;
		}
		.main div{
			height: 800px;
		}
		.main .a{
			background-color: orange;
		}
		.main .b{
			background-color: yellow;
		}
		.main .c{
			background-color: green;
		}
		.main .d{
			background-color: blue;
		}
		.main .e{
			background-color: pink;
		}
		.main .f{
			background-color: purple;
		}
	</style>
</head>
<body>
	<ul id="leftNav">
		<li class="active">1F</li>
		<li>2F</li>
		<li>3F</li>
		<li>4F</li>
		<li>5F</li>
		<li>6F</li>
		<li class="botLi">置顶</li>
	</ul>
	<div id="header">我是header</div>
	<div class="main">
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"></div>
		<div class="e"></div>
		<div class="f"></div>
	</div>
	<script>
		//1. 当滚动条滚动到一定位置时，让导航显示出来，
		//2. 点击对应li是，滚动到对应的楼层；需要知道每一层距离顶层的高度
		window.onload=function(){
			var main=document.getElementsByClassName('main')[0];
			var mainDivs=main.getElementsByTagName('div');
			var mainTop=main.offsetTop;
			var leftNav=document.getElementById('leftNav');
			var leftNavLis=leftNav.getElementsByTagName('li');
			var arr=[];
				for(var n=0;n<mainDivs.length;n++){
					arr.push(mainDivs[n].offsetTop);
				}
				arr.push(0);
			window.onscroll=function(){
				if (document.documentElement.scrollTop>=mainTop) {
					leftNav.style.display="block";
				}else{
					leftNav.style.display="none";
				}
				var height=document.documentElement.scrollTop;
				for(var n=0;n<arr.length;n++){
				//如果当前滚动条的高度小于其底部距离最上方的高度，则选中对应li图标
				//距离顶端的高度，加上其本身的高度（offsetHeight）
					if (height<arr[n]+mainDivs[n].offsetHeight) {
						for(var j=0;j<leftNavLis.length;j++){
							leftNavLis[j].className="";
						}
						leftNavLis[n].className="active";
						break;
					}
				}
				for(var n=0;n<leftNavLis.length;n++){
					leftNavLis[n].index=n;
					leftNavLis[n].onclick=function(){
						for(var j=0;j<leftNavLis.length;j++){
							leftNavLis[j].className="";
							document.documentElement.scrollTop=arr[this.index];
						}
						this.className="active";
					}
				}
			}
		}
	</script>
</body>
</html>