使用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 相关文章推荐
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
vue文件树组件使用详解
Mar 29 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
Node与Python 双向通信的实现代码
Jul 16 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
杏林同学录(八)
2006/10/09 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
javascript下string.format函数补充
2010/08/24 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python pickle模块用法实例
2015/04/14 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
Django实现分页显示效果
2019/10/31 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
PHP面试题及答案二
2015/05/23 面试题
J2EE包括哪些技术
2016/11/25 面试题
公司年会搞笑主持词
2014/03/24 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
技术员岗位职责
2015/02/04 职场文书
安全保证书格式
2015/02/28 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL