jQuery는 단순히 웹 페이지 옵션 카드를 구현합니다.

CSS：

复主代码 代码如下:

        .clear{clear:둘 다; 높이:0px; 오버플로:숨김;}
        .tab{너비:400px; 글꼴 크기:12px;}
        .tab_menu ul{padding:0px;margin:0px;}
        .tab_menu li{list-style:none; 표시:블록; 부동:왼쪽;
            배경:#C2CEFE; 높이:22px; 줄 높이:22px;
            패딩: 0px 8px; 여백 오른쪽:6px; 테두리:#86B4CA 1px 실선;
        }
        .box{너비:400px; 높이:200px; 오버플로:숨김; 테두리:#A8C9D9 1px 실선; 패딩:10px 8px; }
        .tab_menu ul li.selected{배경:#dadada; 커서:포인터; }
        .hide{표시:없음;}

jQuery：

复主代码 代码如下:

        $(함수() {
            var $menu_li = $("div.tab_menu ul li");  //选取网页选项卡
            $menu_li.click(함수(){
                $(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

       

안녕하세요

       

안녕하세요