Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 957344
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
JavaScript for if 对tab选框的制作

分类： JavaScript

2016-08-08 14:17:03


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>JavaScript tab 效果</title>
  6.         <style type="text/css">
  7.         *{
  8.             margin:0;
  9.             padding:0;
  10.         }
  11.             button{
  12.                 width: 298px;
  13.                 height: 80px;
  14.                 margin-left: -10px;
  15.                 font-size: 30px;    
  16.             }
  17.             #button{
  18.                 width: 1000px;
  19.                 margin-left: 28px;
  20.                 
  21.             }
  22.             #tablist{
  23.                 width: 886px;
  24.                 margin-left: 20px;
  25.                 height: 500px;
  26.                 outline:1px solid red;
  27.                 font-size:50px;    
  28.             }
  29.             .list{
  30.                 display:none;
  31.             }
  32.             .tab1{
  33.                 background: black;
  34.                 color: white;
  35.             
  36.             }
  37.             .tab2{
  38.                 background: #FF0000;
  39.             }
  40.             
  41.         </style>
  42.     </head>
  43.     <body>
  44.         <div id="button">
  45.             <button class="tab1">tab1</button>
  46.             <button>tab2</button>
  47.             <button>tab3</button>
  48.         </div>
  49.         <div id="tablist">
  50.             <div class="list" style="display: block;">内容一</div>
  51.             <div class="list">内容二</div>
  52.             <div class="list">内容三</div>
  53.         </div>
  54.         <script type="text/javascript">
  55.         //获取 按键button
  56.             var Button=document.getElementsByTagName("button");
  57. //            console.log(Button);
  58.         //获取 id
  59.             Tablist = document.getElementById("tablist");
  60. //            console.log(Tablist);
  61.         //获取 按键
  62.             var Div=Tablist.getElementsByTagName("div");
  63. //            console.log(Div);
  64.         //第一层循环
  65.             for(var b=0; b<Button.length;b++){
  66.                 //点几事件
  67.                 Button[b].onclick=function(){
  68.                 
  69.                     //第二层循环
  70.                     for( var a=0; a<Div.length;a++){
  71.                         //进行判断如果两个数字的索引相同，就会显示出来相应button取tab1的样式
  72.                         //否则，就会被隐藏 样式为空
  73.                         if(this == Button[a]){
  74.                             
  75.                             Div[a].style.display="block";
  76.                             this.className="tab1";
  77.                             
  78.                         
  79.                         }else{
  80.                             Div[a].style.display="none";
  81. //                            Button[a].setAttribute("class","");
  82.                             Button[a].className='';                            
  83.                         }
  84.                     }
  85.                 }
  86.             }
  87.         </script>
  88.     </body>
  89. </html>

阅读(1110) | 评论(0) | 转发(0) |
0

上一篇：JavaScript for if 对div 奇数偶数不同样式的分配

下一篇：JavaScript小球墙壁反弹制作

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6