使用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 相关文章推荐
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php在线生成ico文件的代码
2007/10/09 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python使用str & repr转换字符串
2016/10/13 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
python 标准差计算的实现(std)
2019/07/29 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
员工手册董事长致辞
2015/07/29 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL