使用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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
js 编写规范
Mar 03 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 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 第二节 数据类型之数值型
2012/04/28 PHP
PHP错误处理函数
2016/04/03 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
webpack 处理CSS资源的实现
2019/09/27 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python字符串查找函数的用法详解
2019/07/08 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
python中id函数运行方式
2020/07/03 Python
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
个人生活学习自我评价范文
2013/11/26 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
工地质量标语
2014/06/12 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2016继续教育研修日志
2015/11/13 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL