前端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>