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 相关文章推荐
JavaScript 对象、函数和继承
Jul 07 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
浅析javascript的return语句
Dec 15 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
vue-cli设置css不生效的解决方法
Feb 07 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操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python生成随机验证码的两种方法
2015/12/22 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Django 路由控制的实现
2019/07/17 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
2013年高中生自我评价
2013/10/23 职场文书
公司市场部岗位职责
2013/12/02 职场文书
新党员入党决心书
2015/09/22 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技