使用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中this用法
May 09 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
vue element实现表格合并行数据
Nov 30 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
PHP 在线翻译函数代码
2009/05/07 PHP
PHP 引用文件技巧
2010/03/02 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
jQuery基础框架浅入剖析
2012/12/27 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
原生js轮播特效
2017/05/18 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
简单易懂的python环境安装教程
2017/07/13 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
python实现大学人员管理系统
2019/10/25 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
保护环境演讲稿
2014/05/10 职场文书
中职生求职信
2014/07/01 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
正确使用MySQL update语句
2021/05/26 MySQL