jQuery簡單實作網頁選項卡特效_jquery

CSS：

複製程式碼程式碼如下：

        .clear{清除：兩者；高度：0px；溢出：隱藏；}
        .tab{寬度：400px;字體大小：12px;}
        .tab_menu ul{padding:0px;margin:0px;}
        .tab_menu li{列表樣式：無；顯示：區塊；浮動：左；
            背景：#C2CEFE；高度：22px；行高：22px；
            內邊距：0px 8px；右邊距：6px；邊框：#86B4CA 1px 實心；
        }
        .box{寬度：400px;高度：200px；溢出：隱藏；邊框：#A8C9D9 1px 實心；內邊距：10px 8px； }
        .tab_menu ul li.selected{背景：#dadada;遊標：指標； }
        .隱藏{顯示：無;}

jQuery：

複製程式碼程式碼如下：

        $(函數() {
            var $menu_li = $("div.tab_menu ul li");  //出現網頁標籤
            $menu_li.click(function(){
                $(this).addClass("selected") //目前

高亮
                        .siblings().removeClass("已選擇"); // 去除其他同儕

的高亮
                var index = $menu_li.index( $(this) ); //找到

子節點的指標
                $("div.tab_box > div").eq(index).show() //索引為N的DIV顯示出來
                        .siblings().hide();                     })
        }) 

html：

複製程式碼程式碼如下：

 

   

       

           
• 個人資料

           
• 我的照片

           
• 我的部落格

           

       

   

   

       

我的QQ：123456

       

hi

;
       

你好