使用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.timer插件实现一个计时器
Apr 25 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
js的回调函数详解
Jan 05 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
Java Varargs 可变参数用法详解
Jan 28 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
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python中的ConfigParser模块使用详解
2015/05/04 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Python中的默认参数实例分析
2018/01/29 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python如何支持并发方法详解
2020/07/25 Python
Pandas的数据过滤实现
2021/01/15 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
2014年卫生院工作总结
2014/12/03 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers