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


Posted in Javascript onFebruary 03, 2016

本文实例介绍了实现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>

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

Javascript 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
Js切换功能的简单方法
Nov 23 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 #Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 #Javascript
javascript自定义滚动条实现代码
Apr 20 #Javascript
JavaScript File API实现文件上传预览
Feb 02 #Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 #Javascript
js+html5操作sqlite数据库的方法
Feb 02 #Javascript
详解Webwork中Action 调用的方法
Feb 02 #Javascript
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Django框架封装外部函数示例
2019/05/28 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Django之腾讯云短信的实现
2020/06/12 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
请介绍一下Ant
2016/07/22 面试题
自我鉴定四大框架
2014/01/17 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang