简单实现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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
js获取单选按钮的数据
Nov 27 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
网站上面有这种切换效果
2006/06/26 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
公务员总结性个人自我评价
2013/12/05 职场文书
产品销售计划书
2014/05/04 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
先进个人自荐书
2015/03/06 职场文书
实习证明模板
2015/06/16 职场文书
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
Python列表的索引与切片
2022/04/07 Python