前端ajax同步更新页面
该ajax实现的效果是点击栏目更新内容
Directory页面的代码
<style>
.Directory{
width:220x;
height:500px;
border:1px solid #ddd;
}
.cont{
width:950px;
min-height:500px;
border:1px solid #ddd;
}
.Directory h3{
text-align:center;
}
.Directory ol{
margin:10px 0;
padding:0 10px;
}
.Directory ol li{
margin:10px 0;
border-bottom:1px dashed #ddd;
list-style-position:inside;
}
.Directory ol li a{
color:#666;
text-decoration:none;
font-size:14px;
}
.Directory ol li a.active{
color:#f00
}
</style>
body内容:
<div style="width:1180px;height:auto;margin:0 auto">
<div>
<h3>蹲在马路上看风景</h3>
<div class="Directory" style="float:left">
<ol>
<li><a href="javascript:;" id=1 class="linkAticle" onclick="linkArtice('article01.html',true,'1')"></a></li>
<li><a href="javascript:;",id=2 class="linkArticle" onclick="linkAticle('article02.html,true,'2'')"></a></li>
<li><a href="javascript:;"id=3 class="linkAticle" onclick="linkAticle('artcle03.html',true.'3')"></a></li>
</ol>
</div>
<div class="cont"style="float:left"></div>
<input type="button" value="111"id="btn">
</div>
</div>
js
<script>
var pathname = window.document.location.pathname;
function linkAticle(url,addEbtry,id){
$(".linkAticle").removeClass("active");
$("#"+id).addClass("active");
$.ajax({
type:"get",
url:url,
async:true,
success:function(data){
$(".cont").html(data);
}
});
var state = new object();
state.id = id;
if(addEbtry == true){
history.pushState(state,null,url);
}
}
$(document).bind("keydown",function(e){
e = window.event || e;
if(e.keyCode == 16){
alert("页面禁止刷新");
e.keycode=0;
return false;
}
})
</script>
acticle01页面
<style>
article h4{
text-align:center;
}
article div{
padding:10px
}
p{
font-size:14px;
color:#666;
text-indent:2em
}
</style>
body
<article>
<h4>小溪边的童年</h4>
<div>
<p>刚刚完成了为期两周的试讲,微格教学录像是我收获颇多,受益匪浅</p>
<p>因为第一次走上讲台面对这么多人</p>
</div>
</article>
article02 的代码
article h4{
text-align:center
}
article div{
padding:10px;
}
p{
font-size:14px;
color:#666;
text-indent:2em
}
html
<article>
<h4>一个人过春节</h4>
<div>
<p>web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视</p>
<p>网页不再是承受单一的文字和图片</p>
</div>
</article>
article03.html代码
<style>
article h4{
text-align:center
}
article div{
padding:10px;
}
p{
font-size:14px;
color:#666;
text-indent:2em;
}
html
<article>
<h4>你的未来是什么样子</h4>
<div>
<p>我做项目经理时遇到一件事情,给了我比较大的触动有一个小伙子,我曾经给过他比较高的评价,推荐他参加</p>
<p>我问有没有什么问题,他会说没什么问题。几次下来,我失望了绩效评估时我给了他很低的分数,按这个分数,会降薪,会被公司劝退最终这个伙计离职了</p>
</div>
</article>
</style>