简单实现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 EasyUI 使用介绍
Apr 01 Javascript
JS定时关闭窗口的实例
May 22 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
JavaScript实现4位随机验证码的生成
Jan 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
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python制作微博图片爬取工具
2021/01/16 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
仓库管理计划书
2014/05/04 职场文书
关于爱国的标语
2014/06/24 职场文书
大学生个人求职信例文
2014/07/07 职场文书
党员评议思想汇报
2014/10/08 职场文书
民用住房租房协议书
2014/10/29 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
学校开除通知书
2015/04/25 职场文书
python turtle绘图命令及案例
2021/11/23 Python
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
Elasticsearch 配置详解
2022/04/19 Java/Android
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js