ホームページ >ウェブフロントエンド >jsチュートリアル >JQueryタブの効果(JSとHTMLの分離)_jquery

JQueryタブの効果(JSとHTMLの分離)_jquery

WBOYオリジナル: 2016-05-16 18:30:441119ブラウズ

実際のアプリケーションでは、タブモジュール構造コードの整合性が確保されている限り、同じ種類の N 個のタブを任意に追加できます。HTML でイベントハンドラーを手動でバインドしたり、非表示にするコンテンツレイヤーに ID を追加したりする必要はありません。。
JavaScript (jquery) コードは次のとおりです:

コードをコピーコードは次のとおりです:

 
< スクリプト言語="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("ul.menu li:first-child") .addClass("current "); 
$("div.content").find("div.layout:not(:first-child)").hide(); 
$("div.content") div.layout") .attr("id", function(){return idNumber("No") $("div.content div.layout").index(this)}); 
$("ul. menu li"). click(function(){ 
var c = $("ul.menu li"); 
varindex = c.index(this); 
var p = idNumber("いいえ"); 
show(c,index,p); 
}); 
function show(controlMenu,num,prefix){ 
var content= prefix num; 
$('# ' コンテンツ).siblings ().hide(); 
$('#' コンテンツ).show(); 
controlMenu.eq(num).addClass("current").siblings().removeClass( "現在の"); 
関数 idNumber(プレフィックス) 
戻り値 
}; script> 
 
 
CSS スタイル コードは次のとおりです: 

コードをコピーします

コードは次のとおりです: < ;style type="text/css"> * {margin:0; padding:0}

ul,li { list-style:none}

.box {幅:450px; 高さ:150px; ボーダー:1px 余白:12px; フォントファミリー:Verdana、Arial、Helvetica、sans-serif; :28px; 行の高さ:28px; 背景: #efefef; 位置:相対; 境界の下:1px; 
.tagMenu h2 {font-size:12px;} 
 .tagMenu ul {position:absolute; left:-1px; height:26px;} 
ul.menu li {float:left:1px;マージン:5px 0 0 -1px; ボーダー左:1px ソリッド #999; テキスト整列:センター; カーソル:ポインター} 
ul.menu li.current {ボーダー:1px ボーダー-bottom:none; 背景:#fff; 高さ:25px; マージン:0} 
.content {パディング:10px} 

 
HTML 構造コードは次のとおりです: 

コードをコピー

コードは次のとおりです: