基于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 相关文章推荐
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
学习jQuey中的return false
Dec 18 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
原生js中运算符及流程控制示例详解
Jan 05 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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
使用php4加速网络传输
2006/10/09 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python自动化报告的输出用例详解
2018/05/30 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python数据爬下来保存的位置
2020/02/17 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Python pip 常用命令汇总
2020/10/19 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
新闻发布会活动策划方案
2014/09/15 职场文书
产品调价通知函
2015/04/20 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL