基于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 相关文章推荐
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
javascript天然的迭代器
Oct 29 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 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个人网站架设连环讲(四)
2006/10/09 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
应届生污水处理求职信
2013/11/06 职场文书
文明风采获奖感言
2014/02/18 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
学校推普周活动总结
2015/05/07 职场文书
天堂的孩子观后感
2015/06/11 职场文书
迎新年主持词
2015/07/06 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript