使用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 相关文章推荐
JS设置获取cookies的方法
Jan 26 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
JavaScript实现简单的音乐播放器
Aug 14 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
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
异步加载script的代码
2011/01/12 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Tornado 多进程实现分析详解
2018/01/12 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python将字典转换为XML的方法
2020/08/01 Python
python opencv实现图像配准与比较
2021/02/09 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
高中军训感言200字
2014/02/23 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
会计求职简历自我评价
2015/03/10 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js