使用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常用代码段搜集
Dec 04 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
AJAX的全称是什么
2012/11/06 面试题
大学生如何写自荐信
2014/01/08 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL