使用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 相关文章推荐
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Python如何将函数值赋给变量
2020/04/28 Python
python属于软件吗
2020/06/18 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
C++面试题目
2013/06/25 面试题
证券期货行业个人的自我评价
2013/12/26 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
2015年路政工作总结
2015/05/22 职场文书
2016国培学习心得体会
2016/01/08 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技