두 번째 기사입니다. 첫 번째 기사에서는 탭 페이지 인터페이스를 참조하여 jQuery 및 Ajax 기술을 사용하여 코드 기능을 구현합니다. 1, 완전히 실현합니다. 탭 논리 기능인 탭의 스타일은 프런트 엔드 코드에 의해 완전히 제어되므로 매우 유연합니다. 2. 탭 페이지의 트리거 이벤트는 클릭입니다. 3. 인터페이스는 테이블로 구성되어 있습니다. 작동하려면 주요 개체의 클래스와 ID만 구성하면 됩니다. 코드 복사 코드는 다음과 같습니다. .org/1999/xhtml"> < ;head> 내 탭 <br>body {font-size:12px } <br>.tab {배경:url(images/gray.png);} <br>< ;/style> <br><script type="text/javascript" src="jquery/jquery-1.2.6.min.js"> ;</script> <br><script type="text/ javascript"> <br>$(document).ready(function() <br>{ <br>//------ ----- <br>var tabclass = ".tab"; //탭 배열 ID <br>var tabs = ["#tab1", "#tab2" , "#tab3"]; //탭 배열 ID <br>var datas = ["#data1", "#data2", "#data3"]; <br>var tab_selected_bgimg = "images/green.png" <br>var tab_unselected_bgimg = "images/gray.png" <br>var tab_selected_txtcolor; = "#ff6600"; <br>var tab_unselected_txtcolor = "#666666"; <br>var curr_index; <br>$(tabclass).click (function() <br>{ <br>for(var i=0; i<tabs.length;i ) <BR>{ <BR>if($(tabs[i]).attr("id")= =$(this).attr("id")) <BR>{ <BR>curr_index = parsInt(i) 1; <BR>} <BR>$(tabs[i]).css("Background-image" , "url(" tab_unselected_bgimg ")") <BR>$(tabs[ i]).css("color", tab_unselected_txtcolor); <BR>$(datas[i]).hide() <BR>} <BR>$(this).css("배경 이미지", "url (" tab_selected_bgimg ")"); <BR>$(this).css("color", tab_selected_txtcolor); <BR>$("# data" curr_index).show(); <BR>}); <BR> $("#tab1").click(); <BR>//--------------- -- <BR>}) <BR></script> ></head> <br><body> <br><table border="0" width="500" height=" 25" border="0" align="center" cellpadding="0" 셀 간격 ="0"> <br><tr> <br><td width="97" class="tab" id=" tab1">tab1</td> 30"></td> <br><td width="97" class="tab" id="tab2"> tab2</td> <br><td width="30"> <br><td width="97" class="tab" id="tab3">tab3</td> <br><td width="149"></td> ; <BR></tr> <br></table> <br><table border="1" width="500 " height="60" border="0" align="center" cellpadding= "0" cellpacing="0"> <br><td> <br><div id= "data1"> <br></div> ; <BR><div id="data2"> <br>이것은 데이터2입니다 <br></div> <br>< ;div id="data3"> <br> </td> <br> <br> <br><br> <br> ) 2009-9-21</div>