增加了第一课练习

单页切换/index.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>onePage</title>
+	<style type="text/css">
+		.page{
+			position: fixed;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+		}
+		.hide{display: none;}
+		.bluePage{background-color: #09c;}
+		.orangePage{background-color: #f60;}
+		.grayPage{background-color: #ccc;}
+	</style>
+	<script type="text/javascript" src="jquery.js"></script>
+	<script type="text/javascript">
+		let router=[
+			{
+				name:'index',
+				path:'/index',
+				title:'首页',
+				isActive:true
+			},
+			{
+				name:'news',
+				path:'/news',
+				title:'新闻',
+				isActive:false
+			},
+			{
+				name:'about',
+				path:'/about',
+				title:'介绍',
+				isActive:false
+			}
+		]
+		function refreshHtml(){
+			let htmlContent='';
+			let addClass='';
+			for(let i=0;i<router.length;i++){
+				if(router[i].isActive){
+					addClass='';
+				}else{
+					addClass='hide';
+				}
+				htmlContent=htmlContent+"<div class='page bluePage "+addClass+"' routeName='page-"+router[i].name+"'>"+router[i].title+"</div>"
+			}
+			$("#layout-1").html(htmlContent);
+		}
+		function changePage(pageName){
+			let index=-1;
+			let indexActive=-1;
+			for(let i=0;i<router.length;i++){
+				if(router[i].name==pageName){
+					index=i;
+				}
+				if(router[i].isActive){
+					indexActive=i;
+				}
+			}
+			if(index!=-1){
+				router[indexActive].isActive=false;
+				router[index].isActive=true;	
+			}else{
+				console.log("page not found")
+			}
+			refreshHtml()
+		}
+		function createHtmlPages(){
+			changePage("index")
+		}
+	</script>
+</head>
+<body>
+	<div id="layout-1"></div>
+</body>
+<script type="text/javascript">
+	createHtmlPages();
+	changePage("index")
+</script>
+</html>
\ No newline at end of file