基于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 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
jquery手风琴特效插件
Feb 04 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
基于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查看session内容的函数
2008/08/27 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
JS长整型精度问题实例分析
2015/01/13 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
Vue之Watcher源码解析(1)
2017/07/19 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Form表单及django的form表单的补充
2019/07/25 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
水果连锁超市创业计划书
2014/01/24 职场文书
关于迟到的检讨书
2014/01/26 职场文书
物理教学随笔感言
2014/02/22 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
房屋维修协议书范本
2014/09/25 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript