当前位置： 移动技术网 > IT编程>开发语言>Jquery > js之选项卡（tag标签）

js之选项卡（tag标签）

2018年12月25日  | 移动技术网IT编程  | 我要评论

目标效果：点击不同按钮显示不同内容

代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        input{background-color: white}
        .click{background-color: darkcyan}
        div{width: 200px;height: 200px;background-color: antiquewhite;display: none}
    </style>
    <script type="text/javascript">
        window.onload=function ()
        {
         var ainput = document.getelementsbytagname('input');//获取所有input标签
         var adiv = document.getelementsbytagname('div');//获取所有div标签
         var i = 0
         for (i=0;i<ainput.length;i++)
         {
             ainput[i].index = i
             ainput[i].onclick=function ()//循环点击input标签
             {
                for(i=0;i<ainput.length;i++)//循环清除input标签和div标签样式某些属性
                {
                    ainput[i].classname='';
                    adiv[i].style.display='none';
                }
                // alert('点击'+this.index+'个按钮');
                 adiv[this.index].style.display='block';//当前input所对应的显示div
                 this.classname='click';
             }
         }
        }
    </script>
</head>
<body>
   <input  type="button" value="1">
   <input type="button" value="2">
    <div>000</div>
    <div>111</div>
</body>
</html>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网