使用JQuery快速实现Tab的AJAX动态载入(实例讲解)


Posted in Javascript onDecember 11, 2013

下面我就简单讲一下实现过程:

1.找到链接源,我这里是一串的Li下的链接

2.处理样式

3.当鼠标移过时载入链接源的网站到指定容器,并切换样式让点击事件返回false,这里不会应该点击到链接源网页

5.Over了.

脚本:

    {
    //homeNews
          var tid = "#homeNews";//removeTabBold
          var lvTabs = $(tid);
          if(lvTabs != null)
          {
            lvTabs.find("a").each(function(){$(this).click(function(){return false;});$(this).mouseover(function(){
removeTabBold(tid);$(this).addClass("bold");
$(this).parent().addClass("lvbg");
$('#HomeNewsList').load($(this).href());
return false;})});
          }
    }
    function removeTabBold(LvTabId)
    {
       $(LvTabId).find("a").each(function(){
$(this).removeClass("bold");
$(this).parent().removeClass("lvbg");
$(this).parent().parent().parent().removeClass("lvp");});
    }
Javascript 相关文章推荐
文字幻灯片
Jun 26 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
jquery移动节点实例
Jan 14 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
Three.js学习之网格
Aug 10 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 #Javascript
js为空或不是对象问题的快速解决方法
Dec 11 #Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 #Javascript
javascript弹出层输入框(示例代码)
Dec 11 #Javascript
深入理解javascript中defer的作用
Dec 11 #Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 #Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 #Javascript
You might like
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
tagName的使用,留一笔
2006/06/26 Javascript
学习jquery之一
2007/04/27 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
图解javascript作用域链
2019/05/27 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python读取键盘输入的2种方法
2015/06/16 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
超市商业计划书
2014/05/04 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
OpenCV-Python实现轮廓拟合
2021/06/08 Python
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
MySQL的索引你了解吗
2022/03/13 MySQL
MySQL数据库查询之多表查询总结
2022/08/05 MySQL