首页 > Web开发 > 详细

ajax实现局部刷新

时间:2016-11-02 17:40:22      阅读:236      评论:0      收藏:0      [点我收藏+]

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div class="maxBox">
<span class="T-active indexA">首页</span>
<span class="T-active indexB">九块九包邮</span>
<span class="T-active indexC">优品购</span>
</div>
<div class="content">
<img src="img/1.png">
</div>
<div><img src="img/foot.png"></div>
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
$(‘.T-active‘).each(function(){
$(this).click(function(){
if($(this).hasClass(‘indexA‘)){
var url = ‘./index1.html‘;
Public(url);
}else if($(this).hasClass(‘indexB‘)){
var url = ‘./index2.html‘;
Public(url);
}else if($(this).hasClass(‘indexC‘)){
var url = ‘./index3.html‘;
Public(url);
}
})
});
// $(‘.maxBox‘).on(‘click‘,‘.T-active‘,function(){
// if($(this).hasClass(‘indexA‘)){
// var url = ‘./index1.html‘;
// Public(url);
// }else if($(this).hasClass(‘indexB‘)){
// var url = ‘./index2.html‘;
// Public(url);
// }else if($(this).hasClass(‘indexC‘)){
// var url = ‘./index3.html‘;
// Public(url);
// }
//
// });
function Public(url){
$.ajax({
type:‘post‘,
cache:‘false‘,
url:url,
dataType:‘html‘,
success : function(data){
$(".content").html(data)
}
})
}

</script>
</html>

ajax实现局部刷新

原文:http://www.cnblogs.com/ZH1132672711/p/6023317.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!