基于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模拟实现Array的sort方法
Dec 11 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
vue+vant实现商品列表批量倒计时功能
Jan 13 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
Using the TextRange Object
2006/10/14 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
教师一帮一活动总结
2014/07/08 职场文书
护理心得体会范文
2016/01/22 职场文书
靠谱的活动总结
2019/04/16 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js