欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery简单实现网页选项卡特效

程序员文章站 2022-03-12 11:25:02
css: 代码如下:         .clear{clear:both; height:0px;...

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 = $("p.tab_menu ul li");  //选取网页选项卡
            $menu_li.click(function(){
                $(this).addclass("selected") //当前<li>高亮
                        .siblings().removeclass("selected"); //去掉其它同辈<li>的高亮
                var index = $menu_li.index( $(this) ); //找到<li>子节点的索引
                $("p.tab_box > p").eq(index).show() //索引为n的div显示出来
                        .siblings().hide();            //其它的选项卡隐藏
            })
        }) 

html:

代码如下:


 <p class="tab">
    <p class="tab_menu">
        <ul>
            <li class="selected">个人信息</li>
            <li class="selected">我的照片</li>
            <li class="selected">我的博客</li>
            <p class="clear"></p>
        </ul>
    </p>
    <p class="tab_box">
        <p class="box">我的qq:123456</p>
        <p class="box hide">hi </p>
        <p class="box hide"> hello <br> </p>
    </p>
</p>