基于JavaScript实现选项卡效果


Posted in Javascript onJuly 21, 2017

一个简单的选项卡的关键在于:当切换页面时,如何让所选的选项和与其对应的内容同时出现,并且在选择其他的内容时,不影响新的内容的显示。

其中用到两个很关键的思想:

1.为对象增加index属性,并通过this对index 的调用来使每个选项能显示出所对应的内容,并且属性值要设置为循环时的数值-i。
2.通过对class(类)的灵活使用,来改变当先所选中目标的样式。
3、用for循环嵌套事件对每一项进行遍历。
4、在编译时,位于body中的div和input要有预先定义的行内样式或者信息。
5、button和div.style.display要同时清零,同时出现才能达到选项卡的目的。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>选项卡</title>
  <style type="text/css"> 
    #div1 .active{
      background: red;
      color: white;
    }
    #div1 div{
      width: 237px;
      height:150px;
      background:#CCC;
      display: none;
    }

  </style>
  <script type="text/javascript">
    window.onload=function(){
      var oDiv = document.getElementById('div1');
      var btn = oDiv.getElementsByTagName('input');
      var aDiv = oDiv.getElementsByTagName('div');

      for (var i = 0; i < btn.length; i++) {
        btn[i].index=i;
        //给btn增加一个index的属性
        btn[i].onmouseover = function(){
          for (var i = 0; i < btn.length; i++) {
            btn[i].className = '';
            aDiv[i].style.display = 'none';
          }
          this.className = 'active';

          aDiv[this.index].style.display = 'block';

          //调用index属性
        }
      }
    };
  </script>
</head>
<body>
  <div id="div1">
    <input type="button" value="首页" class="active">
    <input type="button" value="菜单">
    <input type="button" value="帮助">
    <input type="button" value="联系">
    <input type="button" value="赞助">
    <div style="display: block;">这是首页</div>
    <div>这是菜单</div>
    <div>这是帮助</div>
    <div>这是联系</div>
    <div>这是赞助</div>
  </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
基于JavaScript实现弹幕特效
Aug 27 #Javascript
js实现水平滚动菜单导航
Jul 21 #Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 #Javascript
JavaScript实现购物车基本功能
Jul 21 #Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 #Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于input框覆盖掉数字英文的实例讲解
Jul 21 #Javascript
You might like
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
解决python replace函数替换无效问题
2020/01/18 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
留学生求职信
2014/06/03 职场文书
党性分析材料格式
2014/12/19 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript