zoukankan      html  css  js  c++  java
  • 选项卡

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="智能社 - zhinengshe.com">
    <meta name="copyright" content="智能社 - zhinengshe.com">
    <title>智能社 - www.zhinengshe.com</title>
    <style>
    input { 100px; }
    input.active { background:yellow; }
    
    div { display:none; 320px; height:200px; background:#ccc;  }
    div.active { display:block; }
    </style>
    <script>
    window.onload=function (){
        var oNextBtn=document.getElementById('next');
        var oPrevBtn=document.getElementById('prev');
        var aBtn=document.getElementsByTagName('input');
        var aDiv=document.getElementsByTagName('div');
        var timer=null;
    
        var now=0;
    
        for (var i=0; i<aBtn.length; i++)
        {
            (function (index){
                aBtn[index].onclick=function (){
                    now=index;
    
                    tab();
                };
    
                aDiv[i].onmouseover=function (){
                    clearInterval(timer);
                };
    
                aDiv[i].onmouseout=function (){
                    timer=setInterval(next, 300);
                };
    
            })(i);
        }
    
        oNextBtn.onclick=next;
    
        oPrevBtn.onclick=function (){
            now--;
            if (0>now)
            {
                now=aBtn.length-1;
            }
    
            tab();
        };
    
        timer=setInterval(next, 300);
    
        function next()
        {
            now++;
    
            if (now==aBtn.length)
            {
                now=0;
            }
    
            tab();
        }
    
        function tab()
        {
            for (var i=0; i<aBtn.length; i++)
            {
                aBtn[i].className='';
                aDiv[i].className='';
            }
    
            aBtn[now].className='active';
            aDiv[now].className='active';
        }
    };
    </script>
    </head>
    
    <body>
        <a href="javascript:;" id="prev">上一张</a>
        <input type="button" value="1" class="active" />
        <input type="button" value="2" />
        <input type="button" value="3" />
        <a href="javascript:;" id="next">下一张</a>
    
        <div class="active">111111</div>
        <div>2222222</div>
        <div>33333333</div>
    </body>
    </html>
  • 相关阅读:
    左侧列固定的表格
    百度地图上添加多个标记,标记上添加信息展示窗口、跳转到导航界面
    vue-cli4版本解决eslint问题
    使用脚手架搭建项目
    正则表达式学习
    函数参数:
    装饰器(重点)
    列表生成式、生成器、迭代器
    logging 日志模块
    json 、 pickle 、shelve序列化
  • 原文地址:https://www.cnblogs.com/heboliufengjie/p/4794060.html
Copyright © 2011-2022 走看看