jQuery选项卡

Posted 2020-12-30 notesbooks

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>