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 监听textarea中按键事件
Oct 08 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Python实现栈的方法
2015/05/26 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
中医专业应届生求职信
2013/11/17 职场文书
活动总结的格式
2014/05/07 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
2019消防宣传标语!
2019/07/10 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
Golang gRPC HTTP协议转换示例
2022/06/16 Golang