作javascript做一 个选项卡 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <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 type="text/javascript">
    var nums = document.getElementsByClassName('num');
    var obj = document.getElementById('bottom');
    var values = ['111', '222', '333'];
    for (var i = 0; i < nums.length; i++) {
        var temp = nums[i];
        nums[i].index = i;
        nums[i].onmousemove = function() {
            for(var j = 0; j < nums.length; j++) {
                nums[j].style.background = 'white';
            }
            nums[this.index].style.background = 'red';
            obj.innerHTML = values[this.index];
        }
    }
</script>

 

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

导航