一、利用window.location.href属性

想搞个变化多端的网页？JQuery的window.location.href功能能帮到你！只要稍微调一下这个参数，页面的URL就能变，不需要再loading新的page。举个例子，当用户点击链接时，地址改变后就能立马更新页面内容，整过过程就像是看电影一样顺畅。不论是简单的一页式网站还是要动态显示的复杂界面，这招都管用。

改个网页链接就跟改QQ昵称一样简单!就像是找到你要换的那段网址ID一样，再给它换个省份，就是把新家告诉[‘window.location.href’]就行啦!比如你敲了个链接，就可以用jQuery的$(‘#link’).click()来触发这个动作，然后在回调里面打出来几句话[‘window.location.href’=>’新的URL地址’]，这样搞定后，你一点击，网页就能翻篇儿了。

靠谱的事儿，就是咱们可以加入鼠标悬停啊、翻页啥的，这样用起来就更顺手，感觉特棒！

$('#link').click(function(){
  window.location.href = 'http://www.example.com'; //修改链接地址
});

二、使用history.pushState()方法

HTML5给我们带来了新的玩法。除了老老实实的window.location.href，还有一招更牛的——history.pushState()。这个小把戏能在没咱注意时，偷偷把浏览器历史记录里的”当前”位置修改，点击链接后，页面不变，地址栏显示新网址。就是这么神不知鬼不觉!

用哇塞的方法history.pushState()，总共带三个字母，分别是：状态数据（就是些啥都行，大家最爱设置成null），然后页面标题（哦对了，特别提醒没设时默认为”null)最后别忘了URL有了这几个神奇的搭档，你就能随心所欲地改变页面的显示内容了！再也不用繁琐的刷新赶快去体验下！

记住，要是想用pushState()这个函数的话，得确定你的浏览器支持HTML5才可以喔！否则就可能会有麻烦咯。所以咱们做项目时，得根据项目需求和客户群体来挑合适的技术路线~

$('#link').click(function(){
  history.pushState(null, null, 'http://www.example.com'); //修改链接地址
});

三、利用jQuery实现无刷新动态切换页面

如果你觉得换页不够酷炫，那就别只改换链接，试试看让它变得“瞬移”，不需要刷新网页！只需把jQuery和页面节点操作还有展示内容结合起来就能做到。

首先，让我们在一个页面上放几片看不见的小区域（像DIV、P、section之类的），这些就是需要显示出来的内容。别忘了给他们分别取个名字，再设定一个独一无二的ID编号，这样接下来找起来就能轻松点儿。接着，把这些区块归纳分类并加上酷炫的class=”page”属性，这样使用起来就更方便了！

咱们得给每条链接加个小动作。就是让用户随便点击哪个链接后，用jQuery把它的href属性找出来，再找出咱们要显示的内容的id。然后把选好的节点发光发热，剩下的就藏起来不给看喽，这样就实现了无刷新的换页功能

最后，咱们要加个小功能来对付点击事件，那就是改下地址栏。要用到history.pushState()这招儿，把加载的东西的ID塞进网址里面，这样咱们就可以边翻页边瞅着地址栏！

  
这是第1页


  
这是第2页


  
这是第3页

运用jQuery改个链接，瞬间变身无刷新动画！这招儿在网页制作中超赞滴，让你的站点更有趣吸睛用户体验满分！

四、优化与扩展

其实在做这些事儿时，我们还可以继续深化技术就拿CSS3的过度效果或动画库来说，这样就能让网页切换更炫目啦；再用上AJAX，加载速度更快，等待时间变得好短呢；还有就是用localStorage存下一些状态数据，这样会让用户感觉更棒。

别忘了，跟刚才提到的那些技巧，这两个领域也是用得着的。学会这些玩意儿，不论你玩什么型号的电脑或者手机访问我们的网站，看上去都会漂漂亮亮的，而且操作起来也更加舒适不已。就比如说，通过使用响应式布局和改进交互方式后，咱的网页可以跨越多款不同尺寸的屏幕显示，而且看起来还是那么的帅气逼人~

$('a').click(function(e){
  e.preventDefault(); //防止链接跳转
  var pageId = $(this).attr('href'); //获取链接的href属性
  $('.page').hide(); //先隐藏所有的页面节点
  $(pageId).show(); //再展示对应的页面节点
});

五、总结与展望

文章说是说，怎么用jQuery来把网页的连接地址改了，搞点动态效果玩儿？比如，怎么给链接加个特效，用什么history.pushState()这个方法，还有看到动态换整个网页内容？这里头全有解答

现在科技好发达，前端开发这块儿也变得更厉害了，新工具和新技术多着！学前端的话，不仅要懂得了解这些新的东西，还要会巧妙地使用它们。

看看这个文章，能帮助你更搞懂怎么用jQuery改变链接地址呦，说不定还能给你提供点网页设计编程的新思路！

$('a').click(function(e){
  e.preventDefault(); //防止链接跳转
  var pageId = $(this).attr('href'); //获取链接的href属性
  $('.page').hide(); //先隐藏所有的页面节点
  $(pageId).show(); //再展示对应的页面节点
  history.pushState(null, null, pageId); //改变URL地址
});

。