>

大致完成js选项卡切换效果

- 编辑:正版管家婆马报彩图 -

大致完成js选项卡切换效果

正文实例介绍了落到实处js选项卡切换效果的详实代码,分享给大家供我们参照他事他说加以考察,具体内容如下

差不离实现js选项卡切换效果,js选项卡切换

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

思路:

  •    1、获取成分;
  •    2、for循环开关成分增添onclick(点击) 大概onmousemove(移入)事件;
  •    3、点击当前按键时会以高亮状态展现,通过for循环历遍把装有的开关样式设置为空在把具备div的display设置为none。
  •    4、点击当前开关增添样式,把近来div显示出来,display设置为block。

html代码: 

 <div id="div1">
  <input type="button" class="active" value="1"/>
  <input type="button" value="2"/>
  <input type="button" value="3"/>
  <input type="button" value="4"/>
   <div class="div2" style="display:block;">11</div>
   <div class="div2">22</div>
   <div class="div2">33</div>
   <div class="div2">44</div>
 </div>

css样式: 

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

 js代码:

<script>
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<btn.length;i++)//循环每个按钮
  {
   btn[i].index=i //btn[i]是指定button的第i个按钮;为该按钮添加一个index属性,并将index的值设置为i
   btn[i].onclick=function()//按钮的第i个点击事件
  {
  for(i=0;i<btn.length;i++)//循环去掉button的样式,把div隐藏
   {
    btn[i].className='' //清空按钮的样式
    div2[i].style.display='none'//隐藏div
   }
    this.className='active'//自身添加active
    div2[this.index].style.display='block'//this.index是当前div


  }
  }

}
</script>

以上就是本文的全体内容,希望对我们的求学抱有辅助。

思路:

你或者感兴趣的篇章:

  • 叁个js封装的正确性的选项卡效果代码
  • js tab 选项卡
  • JQuery 选项卡效果(JS与HTML的分开)
  • js实现tab选项卡函数代码
  • 跨浏览器通用、可选拔的选项卡tab切换js代码
  • 应用js达成选项卡的特别效果的实例
  • javascript达成tabs选项卡切换效果(自写原生js)
  • jsp js鼠标移动到钦赐区域展现选项卡离开时掩盖示例
  • js/jQuery轻巧贯彻选项卡成效

本文实例介绍了实现js选项卡切换效果的详实代码,分享给大家供我们仿效,具体内容如下 思路...

  •    1、获取成分;
  •    2、for循环按键成分加多onclick(点击) 大概onmousemove(移入)事件;
  •    3、点击当前按键时会以高亮状态展现,通过for循环历遍把富有的开关样式设置为空在把富有div的display设置为none。
  •    4、点击当前开关增加样式,把当前div展现出来,display设置为block。

html代码: 

 <div id="div1">
  <input type="button" class="active" value="1"/>
  <input type="button" value="2"/>
  <input type="button" value="3"/>
  <input type="button" value="4"/>
   <div class="div2" style="display:block;">11</div>
   <div class="div2">22</div>
   <div class="div2">33</div>
   <div class="div2">44</div>
 </div>

css样式: 

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

 js代码:

<script>
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<btn.length;i++)//循环每个按钮
  {
   btn[i].index=i //btn[i]是指定button的第i个按钮;为该按钮添加一个index属性,并将index的值设置为i
   btn[i].onclick=function()//按钮的第i个点击事件
  {
  for(i=0;i<btn.length;i++)//循环去掉button的样式,把div隐藏
   {
    btn[i].className='' //清空按钮的样式
    div2[i].style.display='none'//隐藏div
   }
    this.className='active'//自身添加active
    div2[this.index].style.display='block'//this.index是当前div


  }
  }

}
</script>

如上就是本文的全体内容,希望对大家的学习抱有协助。

您恐怕感兴趣的稿子:

  • JS封装的选项卡TAB切换效果示例
  • js选项卡的达成格局
  • 贰个js封装的没有错的选项卡效果代码
  • js编写选项卡效果
  • js学习总计_选项卡封装(实例解说)

本文由关于计算机发布,转载请注明来源:大致完成js选项卡切换效果