???????????????????????
CSS:
? ? ? ? 第二个标签有所不同,是在单击之后,内容区加载相应的页面,加载过程中与server交互须要等待时间,所以实现了"装载中"的友好提示效果.并且,内容区不同于上面的三个div,而是採用了一个div块,通过加载不同内容就可以.
CSS:
JS:
jQuery的使用在兴许项目中加强吧,现在再看到网页上各种各样的弹窗,广告之类的特效都不觉奇妙了,事实上非常多东西你開始知道了就非常快掌握了,慢慢积累自己的代码库,见的越多,写的越多,技术也就越高超! jQuery就写到这里,ajax也该实现了.
???? ? ? ? 这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现效果的来龙去脉,代码就是表达的一种工具,后台展示的是逻辑,前台展现的是图形.
? ? ? ? 说一下这个标签页吧,第一个标签由两部分组成,鼠标移到上面标签上,以下相应显示相应的内容.借助CSS实现标签和内容相融合的效果.这次我们先看终于效果.
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1YW56aGUxMTc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" ?/>
HTML:
<span style="font-size:18px;"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link type="text/css" rel="stylesheet" href="tab.css"/><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="tab.js"></script><title>标签页效果</title></head><body><ul id="tabfirst"><li class="tabin">标签1</li><li>标签2</li><li>标签3</li></ul><div class="contentin contentfirst">我是内容1</div><div class="contentfirst">我是内容2</div><div class="contentfirst">我是内容3</div></body></span>
CSS:
<span style="font-size:18px;">ul,li{margin:0;padding:0;list-style:none;}#tabfirst li{float:left;background-color:#000066;color:white;margin-right:3px;padding:5px;border:1px solid white;}#tabfirst li.tabin{background-color:#000066;border:1px solid #000066;}div.contentfirst{clear:left;background-color:#000066;color:white;padding:10px;width:300px;height:100px;display:none;}div.contentin{display:block;}</span>? ? ? ? 值得一提的是,非常多时候我们的鼠标滑过,并非要改变当前的内容,而是不小心或者不注意碰到了鼠标,怎样解决这一bug呢,jQuery的强大再次上演.不错,我们使用了setTimeout函数,运行时,在加载后延迟指定时间再去运行表达式,这样就能够避免每次滑动都改变内容的漏洞.
JS代码:
<span style="font-size:18px;">var timeoutId;$(document).ready(function(){$("li").each(function(index){//每个包装li的jQuery对象都会运行function中的代码//index是当前运行这个function的li相应在全部li组成的数组中的索引值$(this).mouseover(function(){var liNode=$(this);timeoutId=setTimeout(function(){//将原来显示的内容区域进行隐藏 $("div.contentin").removeClass("contentin");//清除有tabin的li标签的tabin的class $("li.tabin").removeClass("tabin"); //当前标签所相应的内容区域显示出来 $("div").eq(index).addClass("contentin"); $(liNode).addClass("tabin");},300);}).mouseout(function(){clearTimeout(timeoutId);}); ???});});</span>? ? ? ? 第二个标签有所不同,是在单击之后,内容区加载相应的页面,加载过程中与server交互须要等待时间,所以实现了"装载中"的友好提示效果.并且,内容区不同于上面的三个div,而是採用了一个div块,通过加载不同内容就可以.
HTML:
<span style="font-size:18px;"><ul id="tabsecond"><li class="tabin">装入完整页面</li><li>装入部分页面</li><li>从远程获取数据</li></ul><div id="contentsecond"><img alt="装载中" src="images/img-loading.gif" /><div id="realcontent"></div></div></span>
CSS:
<span style="font-size:18px;">#tabsecond li{float:left;color:blue;background-color:white;margin-right:2px;padding:5px;cursor:pointer;}#tabsecond li.tabin{background-color:#F2F6FB;border:1px solid black;border-bottom:0;z-index:10;position:relative;/*使用z-index前提,position为relative或absolute*/}#contentsecond{width:350px;height:150px;padding:10px;background-color:#f2f6fb;clear:left;border:1px solid black;position:relative;top:-1px;}img{display:none;}</span>JS:
<span style="font-size:18px;">//在整个页面装入完毕后,标签效果2的内容区域须要装入静态的html页面内容$("#contentsecond").load("tabLoad.html");//找到标签2效果相应的三个标签,注冊鼠标点击事件$("#tabsecond li").each(function(index){$(this).click(function(){$("#tabsecond li.tabin").removeClass("tabin");$(this).addClass("tabin");if (index==0){//装入静态完整页面$("#contentsecond").load("tabLoad.html");}else if (index==1){//装入动态部分页面$("#contentsecond").load("tabLoad.jsp");}else if(index==2){//装入远程数据(这里也是一个动态页面输出的数据)$("#contentsecond").load("tabData.jsp");}});});//对于loading图片绑定Ajax请求開始和交互结束的事件$("#contentsecond img").bind("ajaxStart",function(){//把div里面的内容情况$("#realcontent").html("");//整个页面中随意Ajax交互開始前,function中的内容会被运行$(this).show();}).bind("ajaxStop",function(){//整个页面中随意Ajax交互结束后,function内容会被运行$(this).hide();});</span>jQuery的使用在兴许项目中加强吧,现在再看到网页上各种各样的弹窗,广告之类的特效都不觉奇妙了,事实上非常多东西你開始知道了就非常快掌握了,慢慢积累自己的代码库,见的越多,写的越多,技术也就越高超! jQuery就写到这里,ajax也该实现了.
实战Jquery(四)--标签页效果
原文地址：https://www.cnblogs.com/llguanli/p/8413129.html