通常网站都有一个新闻中心,里面没一个新闻都是一个页面,我们在做的时候不可能去把他们都写一个页面,那样太麻烦了,下面给大家介绍一个简单的方法,只要两个页面就可以了:
第一个页面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>
2
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]);