JS实现选项卡效果的代码实例


Posted in Javascript onMay 20, 2019

选项卡这个效果估计以后的项目会经常涉及到,对代码还是半熟练的情况下还是写下来吧。
先来布局一个简单的页面:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{margin: 0;padding: 0;list-style: none;}
      #box{margin: 50px;}
      #box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin-right: 2px;float: left;}
      #box .active{background: red;}
      #content{clear: both;}
      #content div{width: 404px;height: 200px;border: 1px solid #d8d8d8;display: none;}
    </style>
  </head>
  <body>
    <div id="box">
      <!--这个ul为选项卡的菜单,提供选择项,并且设置其中一个li为默认样式-->
      <ul>
        <li class="active">新闻</li>
        <li>社会</li>
        <li>科技</li>
        <li>娱乐</li>
      </ul>
      <!--这个div为选项卡的内容,显示不同菜单的不同内容,并且设置其中一个div为可见,其他隐藏-->
      <div id="content">
        <div style="display: block;">新闻</div>
        <div>社会</div>
        <div>科技</div>
        <div>娱乐</div>
      </div>
    </div>
  </body>
</html>

选项卡的制作原理是:有若干的选项和对应数量的内容,当对其中一个选项进行操作时,显示对应内容,其他内容不显示。所以,在页面布局的时候,我们先给一个选项设置特殊样式和显示其对应的内容,其他选项样式不变,对应内容隐藏。当操作选项时,把选项的类名改为特殊样式的类名,并且显示对应内容。

<script type="text/javascript">
  window.onload=function(){
    var oBox=document.getElementById('box');
    var aLi=oBox.getElementsByTagName('li');
    var oCon=document.getElementById('content');
    var aDiv=oCon.getElementsByTagName('div');

    for(var i=0;i<aLi.length;i++){
      aLi[i].index=i;  //为每个li添加对应的索引index
      aLi[i].onclick=function(){  //循环为每个li添加onclick事件
      for(var i=0;i<aLi.length;i++){
        aLi[i].className=''; //循环清空li样式
        aDiv[i].style.display='none'; //循环隐藏所有div
      }
      this.className='active'; //当前点击的元素样式变成active
      aDiv[this.index].style.display='block';  //this.index 获取当前li对应的索引
      }
    }
  }
</script>

今天在做选项卡效果时遇到了一个非常低级的错误,但却迟迟找不到原因,如下:
这个是我布局的选项卡的菜单,看起来很简单,一个ul包着3个li,其中一个是 |,所以可以点击的菜单项只有两项,没毛病。

<ul id="text">
  <li class="active"><a href="javascript:" rel="external nofollow" rel="external nofollow" >必备软件</a></li>
  <li id="shu">|</li>
  <li><a href="javascript:" rel="external nofollow" rel="external nofollow" >常用软件</a></li>
</ul>

内容就不看了,接下来我就开始写JS的代码,getElementById什么的巴拉巴拉开始写,写完for循环觉得写完了,然后就运行。。。默认页正常,点击,,空白。?????怎么回事?F12,aLink[i] is undefind;加了一个console.log,检测获取的aLi,aLink,有值,能获取,没错。然后下面循环检测aLink[i],未定义,这是什么情况?在JS代码搞了将近一个小时,换获取方法,换变量名….各种方法,没效果。万万没想到的是,重新检测aLi的时候,发现长度为3。。顿时懵逼,aLink的长度为2,所以肯定有一个找不到。赶紧把第二个li改成span,成功。万恶的 ||||||||。只能说自己的知识还不够,还要继续努力!!!

var oBox=document.getElementById('box');
var oNav=document.getElementById('nav');
var aLi=oNav.getElementsByTagName('li');
var oCon=document.getElementById('con');
var aLink=oBox.getElementsByClassName('hide');

for(var i=0;i<aLi.length;i++){
  aLi[i].index=i; //为每个li添加对应的索引index
  aLi[i].onclick=function(){ //循环为每个li添加onclick事件
    for(var i=0;i<aLi.length;i++){
      aLi[i].className=''; //循环清空li样式
      aLink[i].style.display='none'; //循环隐藏所有div
    }
    this.className='active'; //当前点击的元素样式变成active
    aLink[this.index].style.display='block'; //this.index 获取当前li对应的索引
  }
}

以上所述是小编给大家介绍的JS选项卡效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
微信打开网址添加在浏览器中打开提示的办法
May 20 #Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 #Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 #Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 #Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 #Javascript
vue-cli webpack配置文件分析
May 20 #Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 #Javascript
You might like
PHP文本操作类
2006/11/25 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
vue实现通讯录功能
2018/07/14 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
Python实现处理管道的方法
2015/06/04 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
python购物车程序简单代码
2018/04/18 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Python数据可视化图实现过程详解
2020/06/12 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
少先队学雷锋活动月总结
2014/03/09 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
采购员岗位职责范本
2015/04/07 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP
pt-archiver 主键自增
2022/04/26 MySQL