zoukankan      html  css  js  c++  java
  • select card 双层

    <html>  <head> <meta http-equiv="content=type" content="text/html;charset=gbk"/> <style>    body,ul,li,img{  margin:0px;  padding:0px;  font-size:30px;    }    #d1{  margin-left:30px;  margin-top:30px;  400px;  height:30px;    }    ul{  list-style-type:none;    }    ul li{  border:2px solid black;    text-align:center;  line-height:29px;  float:left;  60px;  height:30px;  background-color:#cccccc;  cursor:pointer;  margin-right:3px;    }    #d2{  border:2px solid blue;  margin-left:30px;  200px;  height:100px;  background-color:yellow;    }    #d3{  border:2px solid blue;  margin-left:30px;  200px;  height:100px;  background-color:green;    }    .hide{  display:none;    }    .select{  background-color:red;    }

    </style>  <script>    function doChange(index){   var u = document.getElementById("u1");   var lis = u.getElementsByTagName('li');   for(i=0;i<lis.length;i++){     lis[i].className='';   }   var obj = document.getElementById('l'+index);   obj.className='select';   var divs = document.getElementById('d2').getElementsByTagName('div');   for(i=0;i<divs.length;i++){     divs[i].style.display='none';   }   document.getElementById('a'+index).style.display='block';

      var divs2 = document.getElementById('d3').getElementsByTagName('div');   for(i=0;i<divs2.length;i++){     divs2[i].style.display='none';   }   document.getElementById('b'+index).style.display='block';    }  </script>

     </head>  <body>

     <div id="d1">    <ul id="u1">   <li class="select" id="l1" onclick="doChange(1)">选项一</li>   <li id="l2" onclick="doChange(2)">选项二</li>   <li id="l3" onclick="doChange(3)">选项三</li>   <li id="l4" onclick="doChange(4)">选项四</li>   <li id="l5" onclick="doChange(5)">选项五</li>    </ul>         </div>

            <div id="d2">      <div id="a1">选项一内容</div>      <div id="a2" style="display:none;">选项二内容</div>      <div id="a3" style="display:none;">选项三内容</div>      <div id="a4" style="display:none;">选项四内容</div>      <div id="a5" style="display:none;">选项五内容</div>         </div>         <div id="d3">      <div id="b1">选项一内容</div>      <div id="b2" style="display:none;">选项二内容</div>      <div id="b3" style="display:none;">选项三内容</div>      <div id="b4" style="display:none;">选项四内容</div>      <div id="b5" style="display:none;">选项五内容</div>         </div>  </body> </html>

  • 相关阅读:
    新建mvc项目iis报404错误!
    .Net MVC HTTP 错误 404.0 Not Found 解决方法
    一个有趣的C#面试题
    parted分区
    sdp安装及实例
    dede:arclist标签按自定义字段排序
    dedecms标签快速
    也谈string.Join和StringBuilder的性能比较
    WinForms 实现气泡提示窗口
    各种“禁用窗口上的关闭按钮”方法总结及源码
  • 原文地址:https://www.cnblogs.com/guanghuiqq/p/2614971.html
Copyright © 2011-2022 走看看