JQuery快速实现Tab的AJAX动态载入实例讲解

 这篇文章主要介绍了使用JQuery快速实现Tab的AJAX动态载入(实例讲解)需要的朋友可以过来参考下,希望对大家有所帮助

下面我就简单讲一下实现过程:
 
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");});
    }
 

时间: 2025-01-20 20:24:55

JQuery快速实现Tab的AJAX动态载入实例讲解的相关文章

原生ajax调用数据实例讲解_AJAX相关

由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分 function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest()

jQuery+PHP+MySQL二级联动下拉菜单实例讲解_jquery

二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果.实现效果:当选择大类时,小类下拉框里的选项内容也随着改变. 实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理.XHTML首先我们要建立两个下拉选择框,第一个是大类,第二个是小类.大类的值可以是预先写好,也可以是从数据库读取. <label>

JQuery ztree带筛选、异步加载实例讲解_jquery

本文实例分享了JQuery ztree带筛选.异步加载实例,供大家参考,具体内容如下 <html> < head> < base href="<%=basePath%>"> <title>My JSP 'ztree.jsp' starting page</title> <link rel="stylesheet" href="zTrees/css/zTreeStyle/zTree

原生ajax调用数据实例讲解

由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下: 一.兼容浏览器部分 function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(

ASP+AJAX+ACCESS数据库实例讲解三个步骤分享_AJAX相关

看完本篇ajax实例教程,我相信你也可以轻松做出一个初级的AJAX应用. 你也可以直接访问:http://www.jb51.net/codes/57017.html 下载ajax教程的源码示例. 好,下面我们就始一步步让你了解AJAX+ASP基础应用,我们将分三步讲解,如下. 1. 前台AJAX代码(javascript)的创建. 2. 后台服务端ASP AJAX代码的编写. 3. ASP+AJAX+数据库的实例演示及讲解. 第一步:前台AJAX代码(javascript)的创建. 我们先创建一

ASP+AJAX+ACCESS数据库实例讲解三个步骤分享

看完本篇ajax实例教程,我相信你也可以轻松做出一个初级的AJAX应用. 你也可以直接访问:http://www.jb51.net/codes/57017.html 下载ajax教程的源码示例. 好,下面我们就始一步步让你了解AJAX+ASP基础应用,我们将分三步讲解,如下. 1. 前台AJAX代码(javascript)的创建. 2. 后台服务端ASP AJAX代码的编写. 3. ASP+AJAX+数据库的实例演示及讲解. 第一步:前台AJAX代码(javascript)的创建. 我们先创建一

Jquery each方法跳出循环,并获取返回值实例讲解

 这篇文章主要是对Jquery each方法跳出循环,并获取返回值进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 return false:将停止循环 (就像在普通的循环中使用 'break'). return true:跳至下一个循环(就像在普通的循环中使用'continue').  代码如下: function test(){ var success = false; $(..).each(function () {    if (..) {        success =

Jquery each方法跳出循环,并获取返回值(实例讲解)_jquery

return false:将停止循环 (就像在普通的循环中使用 'break').return true:跳至下一个循环(就像在普通的循环中使用'continue'). 复制代码 代码如下: function test(){var success = false;$(..).each(function () {   if (..) {       success = true;       return false;   }}); return success ;} jquery是对象链,所以$

jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解_jquery

本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery