• javascript 时间代理


    
    
     1 <button class="btn-active">按钮1</button>
     2     <button>按钮2</button>
     3     <button>按钮3</button>
     4     <button>按钮4</button>
     5     <div class="div-active">1</div>
     6     <div>2</div>
     7     <div>3</div>
     8     <div>4</div>
     9     <script type="text/javascript">
    10     //1.先获取元素
    11     var buttonList = document.getElementsByTagName("button");
    12     var divList = document.getElementsByTagName("div");
    13     //2.添加事件
    14     for(var i = 0; i < buttonList.length; i++) {
    15         (function(i){ //匿名函数自执行
    16              buttonList[i].onclick = function() {
    17                 for(var j = 0; j < buttonList.length;j++) {
    18                     buttonList[j].className = "";
    19                     divList[j].className = "";
    20                 }
    21                 this.className = "btn-active";
    22                 divList[i].className = "div-active";
    23             }
    24         })(i)
    25     }
    26     </script>
    
    
     1 <button class="btn-active">按钮1</button>
     2     <button>按钮2</button>
     3     <button>按钮3</button>
     4     <button>按钮4</button>
     5     <div class="div-active">1</div>
     6     <div>2</div>
     7     <div>3</div>
     8     <div>4</div>
     9     <script type="text/javascript">
    10     //1.先获取元素
    11     var buttonList = document.getElementsByTagName("button");
    12     var divList = document.getElementsByTagName("div");
    13     //2.添加事件
    14     for(var i = 0; i < buttonList.length; i++) {
    15         buttonList[i].index = i;
    16         buttonList[i].onclick = function() {
    17             for(var j = 0; j < buttonList.length;j++) {
    18                 buttonList[j].className = "";
    19                 divList[j].className = "";
    20             }
    21             this.className = "btn-active";
    22             divList[this.index].className = "div-active";
    23         }
    24     }
    25     </script>
     1 <button style="background-color: yellow;">1</button>
     2     <button>2</button>
     3     <button>3</button>
     4     <button>4</button>
     5     <div style="display:block;">1</div>
     6     <div>2</div>
     7     <div>3</div>
     8     <div>4</div>
     9     <script type="text/javascript">
    10     var buttonArr = document.getElementsByTagName("button");
    11     var divArr = document.getElementsByTagName("div");
    12     for(var i = 0; i < buttonArr.length;i++) {
    13         buttonArr[i].index = i;
    14         // buttonArr[i].setAttribute("index",i);
    15         buttonArr[i].onclick = function() {
    16             for(var j = 0; j < buttonArr.length; j++) {
    17                 buttonArr[j].style.backgroundColor = "#ccc";
    18                 buttonArr[this.index].style.backgroundColor = "yellow";
    19                 divArr[j].style.display = "none";
    20                 divArr[this.index].style.display = "block";
    21             }
    22         }
    23     }
    24     
    25     </script>
     1 <button style="background-color: yellow;">1</button>
     2     <button>2</button>
     3     <button>3</button>
     4     <button>4</button>
     5     <div style="display:block;">1</div>
     6     <div>2</div>
     7     <div>3</div>
     8     <div>4</div>
     9     <script type="text/javascript">
    10     //定义数组并获取数组内各个的节点
    11     var buttonArr = document.getElementsByTagName("button");
    12     var divArr = document.getElementsByTagName("div");
    13     for(var i = 0; i < buttonArr.length;i++) {
    14         buttonArr[i].onclick = function() {
    15             //this 
    16             // alert(this.innerHTML)
    17            //for循环遍历button数组长度
    18             for(var j = 0; j < buttonArr.length; j++) {
    19                 //重置所有的button样式
    20                 buttonArr[j].style.backgroundColor = "#ccc";
    21                 //给当前的(点击的那个)那个button添加样式
    22                 this.style.backgroundColor = "yellow";
    23                 //隐藏所有的div
    24                 divArr[j].style.display = "none";
    25                 //判断当前点击是按钮数组中的哪一个?
    26                 if(this == buttonArr[j]) {
    27                     // alert(j);
    28                      //显示点击按钮对应的div
    29                     divArr[j].style.display = "block";
    30                 }
    31             }
    32         }
    33     }
    34     </script>
     1 <ul id="ul1">
     2      <li class="active">111</li>
     3      <li>222</li>
     4      <li>333</li>
     5      <li>444</li>
     6    
     7  </ul>
     8 <script>
     9     window.onload = function (){
    10         var ul1 = document.getElementById('ul1');
    11         var oli = ul1.getElementsByTagName('li');
    12          
    13         ul1.onclick = function (e){
    14            var e = e || window.event;
    15              var target = e.target || e.srcElement;
    16             for(var i = 0;i<oli.length;i++){
    17                oli[i].className = '';
    18            }
    19              // e.target目标li
    20             target.className = 'active';
    21         };
    22     };
    23 </script>
  • 相关阅读:
    页面后退的总结
    Flash Builder4.6 无法启动,并且报 Failed to create the Java Virtual Machine(1不行的话可以参考下2)
    单独的js代码文件被JSP文件调用,中文乱码问题
    Flash Builder4.6 破解方法的实践
    sql文学习.....关于条件判断的查询....casewhenthen
    解决flash builder 4.6安装过程中安装程序遇到错误(1)
    flex builder 4 控制台不能输出trace()的解决方法
    jstl遍历map,foreach
    jar包直接拷贝到WEBINF/lib下和以userLibrary形式引入的区别?/jar包放置在WEBINF/lib下和通过build path导入的区别是什么?
    flash build 4.6 不能debug 报错 C:\WINDOWS\system32\Macromed\Flash\NPSWF32.dll
  • 原文地址:https://www.cnblogs.com/zapple/p/5276762.html
Copyright © 2020-2023  润新知