window.open跳转新页面

通常网站都有一个新闻中心，里面没一个新闻都是一个页面，我们在做的时候不可能去把他们都写一个页面，那样太麻烦了，下面给大家介绍一个简单的方法，只要两个页面就可以了：
第一个页面index.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				width: 100%;
				height: 100%;
				
			}
			li{
				padding: 40px;
			}
			li:hover{
				cursor: pointer;
				color: red;
			}
			ul{
				width: 700px;
				height: 2000px;
				background-color: antiquewhite;
				margin: 0 auto;
			}
			button{
				width: 80px;
				height: 40px;
				margin-top: -100px;
				position: relative;
				float: right;
			}
			</style>
	</head>
	<body>
		<div id="">
			<ul>
				<li id="1">某某钻石冠名XX、XX主持《XXXXXXX》彩排</li>
				<li id="2">祝愿天下所有的母亲节日快乐，永远健康和美丽！</li>
				<li id="3">某某钻石推广中心员工团队精神训练圆满结束</li>
				<li id="4">某某珠宝南宁国际时尚博览会受捧</li>
				<li id="5">元旦珠宝刷卡交易额翻番</li>
			</ul>
			<button>返回顶部</button>
		</div>
		<script>
			var oUl=document.getElementsByTagName("ul")[0];
			oUl.onclick=function(ev){
				var ev=window.event||ev;
				var target=ev.target||ev.srcElement;
				window.open("xiangqing.html?id="+target.getAttribute("id")); //打开新网页
				//location.href="xiangqing.html?id=xiangqing&name="+target.getAttribute("name");//原网页基础上打开
			}
			
		</script>
	</body>
</html>

第二个页面xiangqing.html:
因为上面的内容是写在li里，所以也要建一个li

<div>
	<ul>
		<li></li>
	</ul>
</div>

js有两种方法：
1

<script>
			 var  oLi=document.getElementsByTagName("li")[0];
			var json=[
				{
					'id':1,
					'neirong':'某某钻石冠名XX、XX主持《XXXXXXX》彩排'
				},
				{
					'id':2,
					'neirong':'祝愿天下所有的母亲节日快乐，永远健康和美丽！'
				},
				{
					'id':3,
					'neirong':'某某钻石推广中心员工团队精神训练圆满结束'
				},
				{
					'id':4,
					'neirong':'某某珠宝南宁国际时尚博览会受捧'
				},
				{
					'id':5,
					'neirong':'元旦珠宝刷卡交易额翻番'
				}
				
			]
			var  id=location.search.substring(location.search.indexOf("=")+1,);
			json.forEach(function (item) {	
				console.log(item['neirong'])
				if(item.id==id){
					oLi.innerHTML=item['neirong'];
					console.log(item.id,id);
				}
			})
	</script>

var  obj={};
			var arr=["某某钻石冠名XX、XX主持《XXXXXXX》彩排","祝愿天下所有的母亲节日快乐，永远健康和美丽！","某某钻石推广中心员工团队精神训练圆满结束","某某珠宝南宁国际时尚博览会受捧","元旦珠宝刷卡交易额翻番"];
			var serch=location.search;
			serch=serch.substring(1,);
		 var arr1=serch.split("&")
			arr1.forEach(function (item) {
				obj[item.split("=")[0]]= item.split("=")[1]
			});
		   document.write(arr[obj.name-1]);

window.open跳转新页面

猜你喜欢