天然灰

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
js选项卡

 

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style>
            .on{
                background: green;    
                color:#fff;
            }
            body div{
                background: cornflowerblue;
                width: 100px;
                height: 100px;
                display: none;    
                alignment-baseline: auto;
            }
        </style>
    </head>
    <body>
        <input type="button"  class="on"  value="书籍" />
        <input type="button" value="招生" />
        <input type="button" value="学校" />
        <div style="display: block;" >1111111111</div>
        <div>2222222222</div>
        <div>3333333333333</div>
    </body>
</html>
<script type="text/javascript">

    var adiv=document.getElementsByTagName("div")
    var abtn=document.getElementsByTagName("input");
        
        for (var i=0;i<abtn.length;i++) {
            abtn[i].index=i;
            abtn[i].onmouseover=function()
            {
                for(var i=0;i<abtn.length;i++)
                {
                    abtn[i].className='';
                    adiv[i].style.display ='none';
                    
                }
                　this.className='on';
                　　adiv[this.index].style.display='block';　
                    
                
            }
        }

</script>

 

posted on 2018-12-26 18:41  天然灰  阅读(164)  评论(0)    收藏  举报