首页 > PHP资讯 > HTML5培训技术 > JQuery学习——标签页效果二

JQuery学习——标签页效果二

HTML5培训技术
 我们最终实现的效果如图所示:
当单击标签一的时候,下面加载的是一个html的全部内容;当单击标签二的时候,下面加载的是一个 ver(function () {  
            var nodeTabin = $(this);  
            setTimeouId = setTimeout(function () {  
                $("#firstDiv .contentin").removeClass("contentin");  
                $("#firstDiv .tabin").removeClass("tabin");  
  
                $("#firstDiv div").eq(index).addClass("contentin");  
                //我在这里犯错了哦,不应该再用this  this如果用在这里的话那么是指的window  
                nodeTabin.addClass("tabin");  
            }, 300);  
        }).mouseout(function () {  
            clearTimeout(setTimeouId);  
        });  
    });  
  
    $("#realContentin").load("HTMLPage.htm");  
    $("#secondDiv li").each(function (index) {  
        $(this).click(function () {  
            /*更改样式*/  
            $("#secondDiv li.tabin").removeClass("tabin");  
            $(this).addClass("tabin");  
  
            if (index == 0) {  
                $("#realContentin").load("HTMLPage.htm");  
            } else if (index == 1) {  
                $("#realContentin").load("Default.aspx div");  
            } else if (index == 2) {  
  
            }  
        });  
    });  
  
    //我刚开始的时候用的是jquery的最新版本,但是出现了无法绑定的问题。  
    $("#secondContentin img").bind("ajaxStart", function () {  
        $(this).show();  
    }).bind("ajaxStop", function () {  
        //setTimeout(function(){$(this).hide()},300);  
        $(this).hide(1000);  
    });  
});  
  
  
  
  
   
 

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持17不支持0