用jquery做一个选项卡 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            .num {
                width: 15px;
                height: 20px;
                float: left;
                border: 1px solid black;
                margin-left: 5px;
                text-align: center;
                background: #FFFFFF;
            }
            #top { width: 200px;height: 20px;}
            #bottom { width: 200px; height: 200px; border: 1px solid black; margin-top: 5px;}
        </style>
    </head>
    <body>
        <div id="body">
            <div id="top">
                <div class="num">1</div>
                <div class="num">2</div>
                <div class="num">3</div>
            </div>
            <div id="bottom"></div>
        </div>
    </body>
</html>
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function() {
        var ts = ['111', '222', '333'];
        $(".num").hover(function() {
            var ind = $(this).index();
            $(".num").eq(ind).css('background', 'red');
            $('#bottom').text(ts[ind]);
        }, function() {
            var ind = $(this).index();
            $(".num").eq(ind).css('background', '#fff');
        });
    });
</script>

 

posted on 2019-10-27 10:24  哈哈哈天蝎  阅读(97)  评论(0)    收藏  举报

导航