首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 16:30:36
原創
1402 人瀏覽過

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
    ;
           
    你好

       



    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!