首页 > Web开发 > 详细

jQuery选项卡

时间:2018-08-18 17:07:11      阅读:187      评论:0      收藏:0      [点我收藏+]

HTML

<div id="div1" style="margin-top: 45px;">
    <ul>
        <li class="active">
            <span>收到的消息</span>
        </li>
        <li>
            <span>发出的消息</span>
        </li>
    </ul>
    <div style="display: block;">
        13
    </div>
    <div>22222222</div>
</div>

js

<script>
    $(function() {
        $(‘#div1‘).find(‘ul li‘).click(function() {
            $(‘#div1‘).find(‘ul li‘).attr(‘class‘, ‘‘);
            $(‘#div1‘).find(‘div‘).css(‘display‘, ‘none‘);
            $(this).attr(‘class‘, ‘active‘);
            $(‘#div1‘).find(‘div‘).eq($(this).index()).css(‘display‘, ‘block‘);
        })
    })
</script>

 

jQuery选项卡

原文:https://www.cnblogs.com/notesbooks/p/9497524.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!