zoukankan      html  css  js  c++  java
  • 选项卡学习

    选项卡是非常通用的,很老套了。会用也理解了,但是还是没有有人指导那么深刻了

    刚开的妙趣课堂的教程,对自己的选项卡学习做如下总结:

    最不会的应该属于或者当前的 index  索引值吧

     写了个最简单的HTML 

         <input type = "button" value = "1" />
        <input type = "button" value = "2" />
        <input type = "button" value = "3" />
        <div>1111</div>
        <div>2222</div>
        <div>3333</div>
    

    接下来看JS

     window.onload = function(){
            var obtn = document.getElementsByTagName("input");
    	var odiv = document.getElementsByTagName('div');
    	for(var i=0; i < obtn.length; i++){
    	   obtn[i].index = i//获取当前的索引值
    	   obtn[i].onclick = function(){
    	      for(var i=0; i < obtn.length; i++){
    		   obtn[i].style.background = ''; 
    		   odiv[i].style.display = 'none'
    	      }
    	      this.style.background = 'red'
    	      odiv[this.index].style.display = 'block' //当前索引值对于显示的DIV 
    	     
    	   }
    	}
      }
    

      

    需要注意的地方是, 获取input索引值,对应下面内容DIV的索引值

  • 相关阅读:
    php1
    element ui
    webpack
    vue-router
    vue实例相关2
    vue实例相关
    js笔记2
    js笔记
    不找工作,你的简历也要更新!
    除了做测试,我们还能做些什么呢?
  • 原文地址:https://www.cnblogs.com/zjx2011/p/2727874.html
Copyright © 2011-2022 走看看