使用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 相关文章推荐
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
jQuery实现增删改查
Dec 22 jQuery
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
JavaScript 数组去重详解
Sep 15 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中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
JTrackBar水平拖动效果
2007/07/15 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
python3学习笔记之多进程分布式小例子
2018/02/13 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
会计毕业生自我鉴定
2013/11/04 职场文书
精彩的推荐信范文
2013/11/26 职场文书
运动会广播稿50字
2014/01/26 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书