简单实现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异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
多种方式实现js图片预览
Dec 12 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
Vue父子传递实例讲解
Feb 14 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
PHP数组相关函数汇总
2015/03/24 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
群众路线教育实践活动方案
2014/02/02 职场文书
教师个人剖析材料
2014/02/05 职场文书
教研处工作方案
2014/05/26 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
会员活动策划方案
2014/08/19 职场文书
总经理检讨书
2014/09/15 职场文书
黄埔军校观后感
2015/06/10 职场文书
禁毒主题班会教案
2015/08/14 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby