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基础语法让人疑惑的地方小结
May 23 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php目录拷贝实现方法
2015/07/10 PHP
PHP 无限级分类
2017/05/04 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
酒店秘书求职信范文
2014/02/17 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
地震慰问信
2015/02/14 职场文书
2015年大学生工作总结
2015/04/21 职场文书