当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery简单实现网页选项卡特效

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

2019年03月27日  | 移动技术网IT编程  | 我要评论

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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网