拾忆1765207585

拾忆1765207585

关注
发信
企业与高职院校合作资源对比
FreeBSD下使用无线网卡ndis(windows网卡驱动)驱动。
php连接数据库的方法
Oracle 11.2.0.4 For Linux 64bit+32bit 11Gu4数据库介质百度云
Maven依赖管理之BOM
外链建设影响seo优化网站的质量 - 今日SEO
Shell 数组介绍
网络编程之tcp协议库 函数
FreeBSD 11.0安装完成初设定
Ubuntu系统启动后停在（initramfs）
手撸ORM浅谈ORM框架之基础篇
搭建分布式 Redis Cluster 集群与 Redis 入门
Redis Lua脚本完全入门
Linux系统中RPS/RFS介绍
数据填报修改时如何增加操作人员信息

JavaScript for if 对tab选框的制作

扫码查看
JavaScript for if 对tab选框的制作-LMLPHP

点击(此处)折叠或打开

  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>

10-20 19:01
查看更多
Powered by LMLPHP ©2025 拾忆1765207585 0.066586