ajax实现局部刷新
<!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>
最新文章
- 笔试常考的Linux命令大全
- JS实现别踩白块小游戏
- JqueryAjaxFormData文件异步上传
- 自定义延时查询控件---valen
- 体验Azure的 Automation “自动化” 服务预览版
- PHP 获取时间的各种处理方式!
- SQL复习三(子查询)
- Python中的unittest和logging
- mybatis的一种批量更新方法【我】
- 网络编程 tftp下载文件的编程
- Django框架----分页器(paginator)
- 雷林鹏分享:C# 数据类型
- Python——scapy模块实现tcp探测目标服务器路由轨迹
- CPU UsageTimes Profile (cpu=times)
- pta6-15(双端循环队列)
- 在IP网络中,P、PE、CE代表意思
- 30. Child Labor Problem and Its Solution 童工问题及解决方法
- percona innobackupex 遇到 connect to MySQL server as DBD::mysql module is not installed 问题
- 关于cmake输出动态链接库名字的问题
- macos 安装 brew