Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert einfach die Webseitenoptionskarte effects_jquery

jQuery implementiert einfach die Webseitenoptionskarte effects_jquery

WBOY
WBOYOriginal
2016-05-16 16:30:361426Durchsuche

CSS:

复制代码 代码如下:

        .clear{clear:both; Höhe:0px; overflow:hidden;}
        .tab{width:400px; Schriftgröße:12px;}
        .tab_menu ul{padding:0px;margin:0px;}
        .tab_menu li{list-style:none; Anzeige:Block; float:left;
            Hintergrund:#C2CEFE; Höhe:22px; Zeilenhöhe:22px;
            Polsterung: 0px 8px; Rand rechts: 6px; Grenze:#86B4CA 1px fest;
        }
        .box{width:400px; Höhe:200px; Überlauf:versteckt; Grenze:#A8C9D9 1px fest; Polsterung: 10px 8px; }
        .tab_menu ul li.selected{background:#dadada; Cursor:Zeiger; }
        .hide{display:none;}

jQuery:

复制代码 代码如下:

        $(function() {
            var $menu_li = $("div.tab_menu ul li");  //选取网页选项卡
            $menu_li.click(function(){
                $(this).addClass("selected") //当前
  • 高亮
                            .siblings().removeClass("selected"); //去掉其它同辈
  • 的高亮
                    var index = $menu_li.index( $(this) ); //找到
  • 子节点的索引
                    $("div.tab_box > div").eq(index).show() //索引为N的DIV显示出来
                            .siblings().hide();            //其它的选项卡隐藏
                })
            }) 
  • html:

    复制代码 代码如下:

     

       

           

                 
    • 个人信息

    •            
    • 我的照片

    •            
    • 我的博客

    •            

             

       

       

           
    我的QQ:123456

           
    Hallo

           
    Hallo

       


    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn