常见问题当前位置:万彩娱乐平台 > 常见问题 > >

简单实现js选项卡切换效果

  

[js选项卡,js选项万彩娱乐平台卡切换]简单实现js选项卡切换效果

  

本文实例介绍了实现js选项卡切换效果的详细代码,分享给大家供大家参考,具体内容如下  

  

思路:  

  
      
  • 1、获取元素;
  •   
  • 2、for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件;
  •   
  • 3、点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的display设置为none。
  •   
  • 4、点击当前按钮添加样式,把当前div显示出来,display设置为block。  
      
  •   
  

html代码:  
  

  
  
  
          
11
  
22
  
33
  
44
  
  
  
  

css样式:  
  

  
  
  .active  {  background:#9CC;  }  .div2  {  width:300px;  height:200px;  border:1px #666666 solid;  display:none;  }  
  
  

js代码:  
  

  
  
  window.onload=function(){  var odiv=document.getElementById('div1');//获取div  var btn=odiv.getElementsByTagName('input');//获取div下的input  var div2=odiv.getElementsByTagName('div') ;//获取div下的div  for(i=0;i  
  

以上就是本文的全部内容,希望对大家的学习有所帮助。

  

(责任编辑:admin)

上一篇:JQuery Tab选项卡效果代码改进版

下一篇:javascript中的nextSibling使用陷(da)阱(keng)

推荐内容

客户服务热线

010-400-12345

在线客服