AJAX TAB JQUERY 选项卡标签

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

index.html

XML/HTML Code@H_301_14@

<@H_301_14@div@H_301_14@@H_301_14@id@H_301_14@=@H_301_14@"main"@H_301_14@>@H_301_14@@H_301_14@@H_301_14@

ul@H_301_14@@H_301_14@class@H_301_14@=@H_301_14@"tabContainer"@H_301_14@>@H_301_14@@H_301_14@@H_301_14@

</@H_301_14@ul@H_301_14@>@H_301_14@@H_301_14@@H_301_14@

div@H_301_14@@H_301_14@class@H_301_14@=@H_301_14@"clear"@H_301_14@>@H_301_14@</@H_301_14@div@H_301_14@>@H_301_14@@H_301_14@@H_301_14@

div@H_301_14@@H_301_14@id@H_301_14@=@H_301_14@"tabContent"@H_301_14@>@H_301_14@@H_301_14@@H_301_14@

div@H_301_14@@H_301_14@id@H_301_14@=@H_301_14@"contentHolder"@H_301_14@>@H_301_14@@H_301_14@@H_301_14@

div@H_301_14@>@H_301_14@@H_301_14@@H_301_14@

AJAX TAB JQUERY 选项卡 标签