Home  >  Article  >  Web Front-end  >  jQuery simply implements web page option card effects_jquery

jQuery simply implements web page option card effects_jquery

WBOY
WBOYOriginal
2016-05-16 16:30:361402browse

CSS:

复制代码 代码如下:

        .clear{clear:both; height:0px; overflow:hidden;}
        .tab{width:400px; font-size:12px;}
        .tab_menu ul{padding:0px;margin:0px;}
        .tab_menu li{list-style:none; display:block; float:left;
            background:#C2CEFE; height:22px; line-height:22px;
            padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid;
        }
        .box{width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; }
        .tab_menu ul li.selected{background:#dadada; cursor:pointer; }
        .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

           
    hi

           
    hello

       


    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn