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 相关文章推荐
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
vue实现公共方法抽离
Jul 31 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 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 创建标签云函数代码
2010/05/26 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
javascript实现贪吃蛇小练习
2020/07/05 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python获取当前时间的方法
2014/01/14 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
python实现祝福弹窗效果
2019/04/07 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
德国网上超市:myTime.de
2019/08/26 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
进口业务员岗位职责
2014/04/06 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
教师工作失职检讨书
2014/09/18 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers
基于redis+lua进行限流的方法
2022/07/23 Redis