AJAX TAB JQUERY 选项卡标签

发布时间：2020-12-16 00:52:24 所属栏目：百科来源：网络整理

导读：AJAX TAB JQUERY 选项卡标签演示 js JavaScript Code script $(document).ready( function (){ var Tabs={ 'Tabone' : 'pages/page1.html' , 'Tabtwo' : 'pages/page2.html' , 'Tabthree' : 'pages/page3.html' ,0);"> 'Tabfour' : 'pages/page4.html' } v

AJAX TAB JQUERY 选项卡标签

演示

 
  JavaScript Code 
 
 
  <script>
$(document).ready(function(){
varTabs={
'Tabone':'pages/page1.html',
'Tabtwo':'pages/page2.html',
'Tabthree':'pages/page3.html',0);">'Tabfour':'pages/page4.html'
}
varcolors=['blue','green','red','orange'];
vartopLineColor={
blue:'lightblue',0);">green:'lightgreen',0);">red:'red',0);">orange:'orange'
}
/*LoopingthroughtheTabsobject:*/
varz=0;
$.each(Tabs,function(i,j){
/*Sequentiallycreatingthetabsandassigningacolorfromthearray:*/
vartmp=$('<li><ahref="#"class="tab'+colors[(z++%4)]+'">'+i+'<spanclass="left"/><spanclass="right"/></a></li>');
/*Settingthepagedataforeachhyperlink:*/
tmp.find('a').data('page',j);
/*AddingthetabtotheULcontainer:*/
$('ul.tabContainer').append(tmp);
})
/*Cachingthetabsintoavariableforbetterperformance:*/
varthe_tabs=$('.tab');
the_tabs.click(function(e){
/*"this"pointstotheclickedtabhyperlink:*/
varelement=$(this);
/*Ifitiscurrentlyactive,returnfalseandexit:*/
if(element.find('#overLine').length)returnfalse;
/*Detectingthecolorofthetab(itwasaddedtotheclassattributeintheloopabove):*/
varbg=element.attr('class').replace('tab','');
/*Removingtheline:*/
$('#overLine').remove();
/*CreatinganewlinewithjQuery1.4bypassingasecondparameter:*/
$('<div>',{
id:'overLine',0);">css:{
display:'none',0);">width:element.outerWidth()-2,
background:topLineColor[bg]||'white'
}}).appendTo(element).fadeIn('slow');
/*CheckingwhethertheAJAXfetchedpagehasbeencached:*/
if(!element.data('cache'))
{
/*Ifnocacheispresent,showthegifpreloaderandrunanAJAXrequest:*/
$('#contentHolder').html('<imgsrc="img/ajax_preloader.gif"width="64"height="64"class="preloader"/>');
$.get(element.data('page'),function(msg){
$('#contentHolder').html(msg);
/*Afterpagewasreceived,addittothecacheforthecurrenthyperlink:*/
element.data('cache',msg);
});
else$('#contentHolder').html(element.data('cache'));
e.preventDefault();
/*Emulatingaclickonthefirsttabsothatthecontentareaisnotempty:*/
the_tabs.eq(0).click();
});
</script>
 
 

index.html

XML/HTML Code

div

"main"

ulclass="tabContainer">
</ul>
divclass="clear"></div>
divid="tabContent">
divid="contentHolder">
div>
div>

原文地址: http://www.freejs.net/article_tabbiaoqian_46.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

AJAX TAB JQUERY 选项卡 标签

AJAX TAB JQUERY 选项卡 标签

AJAX TAB JQUERY 选项卡标签

AJAX TAB JQUERY 选项卡标签