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和DOM Interfaces来处理HTML
Oct 09 Javascript
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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下获取客户端ip地址的函数
2010/03/15 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
laravel入门知识点整理
2020/09/15 PHP
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
jQuery实现购物车全功能
2021/01/11 jQuery
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
python对csv文件追加写入列的方法
2019/08/01 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
医疗纠纷协议书
2014/04/16 职场文书
合作协议书范本
2014/04/17 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
公司租房协议书范本
2014/10/08 职场文书
六年级数学教学反思
2016/02/16 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书