使用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 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
vue+element实现表单校验功能
May 20 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
JS实现手风琴特效
Nov 08 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中动态HTML的输出技术
2006/10/09 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
授权委托书
2014/09/17 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
委托书格式范文
2015/01/28 职场文书
入团介绍人意见范文
2015/06/04 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS