これは 2 番目の記事です。最初の記事では、jQuery と Ajax テクノロジを使用して コードの機能を実装する タブ ページ インターフェイスを参照できます。1、完全に実現します。 Tab 論理関数、Tab のスタイルはフロントエンド コードによって完全に制御され、非常に柔軟です。 2. タブページのトリガーイベントはクリックです。 3. インターフェイスはテーブル内に配置されます。機能するには、キー オブジェクトのクラスと ID を設定するだけです。 コードをコピー コードは次のとおりです: .org/1999/xhtml"> ;head> 私のタブ <br>body {font-size:12px; } <br>.tab {background: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 data = ["#data1", "#data2", "#data3"]; <br>var tab_selected_bgimg = "images/green.png"; <br>var tab_unselected_bgimg = "images/gray.png"; = "#ff6600"; <br>var tab_unselected_txtcolor = "#666666"; <br>var curr_index; <br>$(tabclass).click (function() <br>{ <br>for(var i=0; i<tabs.length>{ <br>if($(tabs[i]).attr("id")= =$(this).attr("id")) <br>{ <br>curr_index = parseInt(i) 1; <br>} <br>$(tabs[i]).css("background-image" , "url(" tab_unselected_bgimg ")"); 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><表 border="0" width="500" height=" 25" border="0" 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"> </td> <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" "0" セルスペース = "0"> <br> <br><td> <BR>これはデータ 1 <BR></div> ; <br><div id="data2"> <br>これはデータ 2 <br></div> <br>これはデータ 3 <br> </div> <br></tr> <br> <br> <br> ) 2009-9-21</tabs.length> </div>
