jquery做的效果(QQTab效果)

最新推荐文章于 2023-05-13 00:05:32 发布

lyq5655779

最新推荐文章于 2023-05-13 00:05:32 发布

阅读量696

点赞数

分类专栏： JQUERY 文章标签： jquery div function 百度

本文链接：https://blog.csdn.net/lyq5655779/article/details/7198410

版权

JQUERY 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

    <script type="text/javascript">
    //总结，多用相对定位简化操作
       $(function(){
         $("div:last",$("#ulTab li:first").siblings()).css("display","none");//把第一个li的兄弟的第二个div隐藏掉
         $("#ulTab>li>div[name=title]").click(function(){//当点击第个标题时触发下面事件
            $(this).siblings().slideDown(300);//先是他的兄弟DIV向下
            
            $("div:last",$(this).parent().siblings()).slideUp(300);//再是他的父类---》兄弟--->最后一个div向上
         });
       });
    </script>

下面就是QQTab效果，原理在这里了，要美化的可以美化哦

<ul id="ulTab">
    <li>
        <div name="title">我的好友</div>
        <div name="body"><ul><li>八戒</li><li>七戒</li><li>OK不啊</li></ul></div>
    </li>
    <li>
        <div name="title">黑名单</div>
        <div name="body"><ul><li>百度</li><li>CSDN</li></ul></div>
    </li>
    <li>
        <div name="title">陌生人</div>
        <div name="body"><ul><li>111</li><li>2222</li></ul></div>
    </li>
</ul>