jQuery は Web ページ オプション カード Effects_jquery を実装するだけです

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：

复制代 代码如下:

 

   

       

           
• 人情報

           
• 私の写真

           
• 我的博客

           

       

   

   

       

我的QQ:123456

       

こんにちは

       

こんにちは