专栏首页移动大前端JS示例08-选项卡

JS示例08-选项卡

一、知识要点

1、自定义下标属性 2、综合使用getElementsByTagName

二、源码参考

<!DOCTYPE >
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            #div1,
            #div2,
            #div3 {
                width: 200px;
                height: 100px;
                border: 1px solid #999;
            }
        </style>
        <script>
            window.onload = function() {
                var tab = document.getElementsByTagName('input');
                var show = document.getElementsByTagName('div');

                tab[0].style.background = 'red';
                show[1].style.display = 'none';
                show[2].style.display = 'none';

                for(var i = 0; i < tab.length; i++) {
                    tab[i].index = i;
                    tab[i].onclick = function() {
                        for(var j = 0; j < tab.length; j++) {
                            tab[j].style.background = '';
                            show[j].style.display = 'none';
                        }
                        this.style.background = 'red';
                        show[this.index].style.display = 'block';
                    }
                }

            }
        </script>
    </head>

    <body>
        <input type="button" name="btn1" id="btn1" value="tab1" />
        <input type="button" name="btn2" id="btn2" value="tab2" />
        <input type="button" name="btn3" id="btn3" value="tab3" />
        <div id="div1">
            1111
        </div>
        <div id="div2">
            2222
        </div>
        <div id="div3">
            3333
        </div>

    </body>

</html>

三、运行效果

QQ20190328-190251.gif

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Webpack03-前端服务配置及热更新

    https://jspang.com/posts/2017/09/16/webpack3.html#%E7%AC%AC04%E8%8A%82%EF%BC%9A%...

    专注APP开发
  • HttpURLConnection,HttpClient的简单使用

    在android 2.2及以下版本中HttpUrlConnection存在着一些bug(建议使用HttpClient) 建议在android 2.3以后使用H...

    专注APP开发
  • JS示例20-如何读取父节点parentNode

    专注APP开发
  • 前端工程师掌握这18招,就能在浏览器里玩转深度学习

    【导读】TensorFlow.js 的发布可以说是 JS 社区开发者的福音!但是在浏览器中训练一些模型还是会存在一些问题与不同,如何可以让训练效果更好?本文的作...

    AI科技大本营
  • 全球首例!远程操纵机器人,20英里外完成心脏手术,《柳叶刀》子刊报道

    一位医生成功地为远在20英里外的病人进行了心脏手术,这可以说是网络、工程学和医学相结合的一大壮举。

    大数据文摘
  • DIY自己的AI助理,萝莉御姐暖男霸道总裁全凭你定义,微软小冰团队发布新框架

    别怕,很快,借助微软小冰团队刚刚推出的Avatar Framework(阿凡达框架),你就可以DIY一个自己的AI助理了。

    量子位
  • 使用GPU和Theano加速深度学习

    用户1737318
  • 阿里90后科学家研发,达摩院开源新一代AI算法模型

    AI科技大本营7月5日消息,阿里达摩院宣布开源新一代人机对话模型ESIM。该算法模型提出两年多,已被200多篇论文引用,更曾在国际顶级对话系统评测大赛(DSTC...

    AI科技大本营
  • 彻底理清 AMD,CommonJS,CMD,UMD,ES6 modules

    1.Rollup 是什么2.CommonJS、AMD、CMD、UMD、ES6 分别的介绍3.ES6 模块与 CommonJS 模块的区别4.模块演进的产物 ——...

    前端迷
  • Python处理CSV,Excel,PD

    逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本...

    用户2398817

扫码关注云+社区

领取腾讯云代金券