简单实现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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JS二维数组的定义说明
Mar 03 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
JS实现长图上下滚动效果
Mar 19 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
PHP添加MySQL数据记录代码
2008/06/07 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python使用magic模块进行文件类型识别方法
2018/12/08 Python
python要安装在哪个盘
2020/06/15 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
法制宣传实施方案
2014/03/13 职场文书
同学会主持词
2014/03/18 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
妈妈别哭观后感
2015/06/08 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
《静夜思》教学反思
2016/02/17 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
教你用Python matplotlib库制作简单的动画
2021/06/11 Python