CSS:
.clear{クリア:両方;高さ:0ピクセル;オーバーフロー:非表示;}
.tab{幅:400ピクセル; font-size:12px;}
.tab_menu ul{パディング:0px;マージン:0px;}
.tab_menu li{リストスタイル:なし;表示:ブロック;フロート:左;
背景:#C2CEFE;高さ:22ピクセル;行の高さ:22px;
パディング: 0px 8px;マージン右:6px;ボーダー:#86B4CA 1px ソリッド;
}
.box{幅:400ピクセル;高さ:200ピクセル;オーバーフロー:非表示;ボーダー:#A8C9D9 1 ピクセルの実線;パディング:10px 8px; }
.tab_menu ul li.selected{background:#dadada;カーソル:ポインタ; }
.hide{display:none;}
jQuery:
$(function() {
var $menu_li = $("div.tab_menu ul li"); //选取网页选项卡
$menu_li.click(function(){
$(this).addClass("selected") //当前
高亮
.siblings().removeClass("選択済み"); //去掉他它同辈の高亮
var インデックス = $menu_li.index( $(this) ); //子ポイントのインデックス
$("div.tab_box > div").eq(index).show() //インデックスがNのDIV表示結果
.siblings().hide(); //その他の選択项卡隐藏
})
})
html: