zoukankan      html  css  js  c++  java
  • JS实现选项卡

    思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。

    1、首先获取元素。

    2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

    3、因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。

    4、把当前按钮添加样式,把当前DIV显示出来,display设置为block。

    注:给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换,当前按钮高度,点击和按钮高亮就是2个事件,所以要用2个for循环历遍。

    HTML代码:

     1 <div id="box">
     2     <input type="button" value="1" />
     3     <input type="button" value="2" />
     4     <input type="button" value="3" />
     5     <input type="button" value="4" />
     6 
     7     <div>1</div>
     8     <div>2</div>
     9     <div>3</div>
    10     <div>4</div>
    11 </div>

    JS代码:

     1 <script>
     2     window.onload=function(){
     3         var box=document.getElementById('box');
     4         var input=box.getElementsByTagName('input');
     5         var div=box..getElementsByTagName('div');
     6 
     7         for(var i=0;i<input.length;i++){  //循环历遍onclick事件
     8            input[i].index=i; //input[0].index=0 index是自定义属性
     9            input[i].onclick=function(){
    10               for(var i=0;i<input.length;i++){  //循环历遍去掉button样式和把div隐藏
    11                  input[i].className='';
    12                  div[i].style.display='none';
    13               };
    14               this.className='active';  //当前按钮添加样式
    15               div[this.index].style.display='block';  //div显示 this.index是当前div 即div[0]之类的
    16            };
    17         };
    18       };
    19 </script>    
  • 相关阅读:
    MAVEN 配置阿里云源
    Windows10远程连接CentOS7(搭建Xrdp服务器)
    在jsp显示图片
    unbuntu自动任务定时重启
    eager模式与自定义训练
    JDK安装
    VMware克隆Linux虚拟机注意事项
    系统字符编码
    Iptables防火墙
    查看系统信息
  • 原文地址:https://www.cnblogs.com/52css/p/2935500.html
Copyright © 2011-2022 走看看