js选项卡的实现方法


Posted in Javascript onFebruary 09, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 #Javascript
angularJS中router的使用指南
Feb 09 #Javascript
javascript实现按回车键切换焦点
Feb 09 #Javascript
jquery中ajax使用error调试错误的方法
Feb 08 #Javascript
JQuery中extend的用法实例分析
Feb 08 #Javascript
jQuery中noConflict()用法实例分析
Feb 08 #Javascript
jquery实现聚光灯效果的方法
Feb 06 #Javascript
You might like
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
php三元运算符知识汇总
2015/07/02 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
深入了解python列表(LIST)
2020/06/08 Python
python 实现图片裁剪小工具
2021/02/02 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
简短大学毕业感言
2014/01/18 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
2014年元旦感言
2014/03/06 职场文书
导师工作推荐信范文
2014/05/17 职场文书
学校火灾防控方案
2014/06/09 职场文书
超市促销活动总结
2014/07/01 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
公司职员入党自传书
2015/06/26 职场文书
教师培训简讯
2015/07/20 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python