ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery は Web ページ オプション カード Effects_jquery を実装するだけです

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

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

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

           
    こんにちは

           
    こんにちは

       


    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。