使用原生js实现选项卡功能实例教程
选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。
先来完成html部分。首先,需要一个元素把整个选项卡包含在内。新建一个div元素,它的id命名为tabBox,如下所示:
<div id="tabBox"></div>
在tabBox元素里面,再把选项卡分为标签和内容两个部分,分别命名class为label_box和content_box,如下所示:
<div id="tabBox" class="tab_box">
<ul class="label_box"></ul><!--标签部分-->
<div class="content_box"></div><!--内容部分-->
</div>
一般情况下,标签元素和内容元素的数量要保持一致,在本实例中把标签和内容都设为三个。 分别在label_box和content_box元素中添加标签和内容,如下所示:
<div id="tabBox" class="tab_box">
<ul class="label_box"><!--标签部分-->
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div class="content_box"><!--内容部分-->
<div class="content">内容一</div>
<div class="content">内容二</div>
<div class="content">内容三</div>
</div>
</div>
为了让选项卡好看一点,读者可以根据自己喜好加上一些样式,也可以直接复制以下样式代码使用:
.tab_box{
width:600px;
margin:30px auto;
}
.label_box{
padding-left:30px;
font-size:;
}
.label_box li{
display:inline-block;
line-height:30px;
height:30px;
padding:0 10px;
margin:0 5px;
font-size:14px;
border:1px solid #2d9aff;
border-bottom:none;
border-top-left-radius:4px;
border-top-right-radius:4px;
cursor:pointer;
}
.label_box li.active{
background:#2d9aff;
color:#fff;
}
.content_box{
padding:20px;
border:1px solid #2d9aff;
border-radius:4px;
box-shadow:0px 0px 6px #aaa;
}
.content_box .content{
display:none;
height:300px;
}
完成html和css部分之后,再来使用js实现标签切换的功能。本实例把选项卡功能封装到函数中,所以先创建一个primaryTab函数,在primaryTab中再来编写具体代码。
笔者建议在完成某一个前端功能时,应先分析功能的具体操作。再根据具体操作把实现功能的方法分成多个步骤,接下来一个步骤一个步骤去完成它。
选项卡的操作非常简单,就是选择标签(可以是点击,也可以是鼠标滑过,本实例使用点击事件)时,快速切换内容且修改当前激活标签样式。默认情况下第一个标签元素为当前激活状态,第一个内容元素需要显示。把这样一个操作,在实现功能上来可分成三个步骤:
1 获取标签元素和内容元素
2 给第一个标签元素添加active样式修改为激活状态;把第一个内容元素通过样式display:bolock来显示。
3 在标签上添加事件,实现切换内容
3.1 遍历标签,给每一个标签添加事件
3.2 在事件函数中遍历标签,把每一个标签的className改为空字符串,用于删除激活标签样式。
3.3 在事件函数中遍历内容元素,把每一个内容元素通过样式设置为隐藏。
3.4 在事件函数中通过this找到当前标签元素,设置className,修改当前标签元素样式为激活状态。
3.5 在事件函数中通过变量找到对应的内容元素,并通过样式设置为显示。
具体代码如下:
function primaryTab(){
//1.获取选项卡外包元素
var eTab = document.getElementById('tabBox');
//1.获取标签外包元素
var eLabel = eTab.getElementsByClassName('label_box')[0];
//1.获取所有标签元素的集合
var aLabels = eLabel.getElementsByTagName('li');
//1.获取内容外包元素
var eContent = eTab.getElementsByClassName('content_box')[0];
//1.获取所有内容元素的集合
var aContents = eContent.getElementsByClassName('content');
//2.给第一个标签元素添加active样式修改为激活状态
aLabels[0].className = 'active';
//2.把第一个内容元素通过样式display:bolock来显示
aContents[0].style.display = 'block';
//3.1 遍历标签,注意:本实例这里声明变量i只能用let,如果用var会出错
for(let i=0;i<aLabels.length;i++){
//3.1 给每一个标签添加点击事件
aLabels[i].onclick = function(){
//3.2 遍历标签
for(let n=0;n<aLabels.length;n++){
//3.2 把每一个标签的className改为空字符串,用于删除激活标签样式。
aLabels[n].className = '';
//3.3 因为标签元素和内容元素数量相同,所以可通过变量n把每一个内容元素通过样式设置为隐藏
aContents[n].style.display = 'none';
}
// 3.4 通过this找到当前标签元素,修改当前标签元素为激活状态。
this.className = 'active';
//3.5 通过变量i找到对应的内容元素,并通过样式设置为显示。
aContents[i].style.display = 'block';
}
}
}
//调用选项卡函数
primaryTab();
好了,就是这么简单,相信通过本教程的学习,你一定很轻松可以掌握JS选项卡功能。
使用原生js实现选项卡功能实例教程的更多相关文章
- 通过模拟数据,使用js在前端实现模糊查询下拉框功能实例教程
所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据,而得出的查询结果.本实例教程讲解在前端文本框输入关键字,显示匹配的数据列表功能. 首先得准备一个文本框和显示数据列表的div元素,html代码 ...
- 原生js实现分页功能
原生就是实现分页功能 代码如下: var pagination = function(option,fun){ this.parentId = option.id; //容器 this.pageSiz ...
- 原生js拖拽功能制作滑动条实例教程
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...
- 原生JS实现购物车功能
html <div class="catbox"> <table id="cartTable"> <thead> <t ...
- js实现选项卡功能
1.css .liclick{ border: 1px black solid; background: #fff; float: left; width: 80px; height: 35px; l ...
- 原生js实现选项卡
html代码: <div class="tab"> <ul> <li class="selected">图片</li& ...
- 原生js实现选项卡样式切换的几种方式。
先分享一个不能实现的实例(因为es5没有块作用域) for(var i=0; i<list.length; i++ ) { list[i].onclick = function(){ tabch ...
- 原生 js 录屏功能
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
随机推荐
- 设计模式—建造者模式(Builder)
title: 设计模式-建造者模式 建造者模式(Builder)是一步一步创建一个复杂的对象,它允许用户只通过指定复杂对象的类型和内容就可以构建它们,用户不需要知道内部的具体构建细节.建造者模式属于对 ...
- 成为视频分析专家:自动生成视频集锦(Python实现)
介绍 我是个超级板球迷.从我记事起,我就迷上了这项运动,至今它仍在我的日常生活中起着重要的作用.我相信很多读到这篇文章的人都会点头! 但是自从我开始工作以来,要跟上所有的比赛就成了一件棘手的事.我不能 ...
- TensorFlow系列专题(五):BP算法原理
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/ ,学习更多的机器学习.深度学习的知识! 一.反向传播算法简介 二.前馈计算的过程 第一层隐藏层的计算 第 ...
- 推荐|近期热点机器学习git项目
No1: InterpretML by Microsoft--Machine Learning Interpretability github地址:https://github.com/microso ...
- Python第十章-模块和包
模块和包 我们以前的代码都是写在一个文件中, 而且代码也比较短. 假设我们现在要写一个大的系统, 不可能把代码只写到一个文件中, 迫切想把代码写到不同的文件中, 并且能够在一个文件使用另一个文件中代码 ...
- 使用Git pull文件时,出现"error: RPC failed; curl 18 transfer closed with outstanding read data remaining"
error: RPC failed; curl transfer closed with outstanding read data remaining fatal: The remote end h ...
- iOS 响应链
一.UIResponder app 使用响应者对象接收和处理事件,只有继承 UIResponder 的类,才能处理事件. UIApplication.UIView.UIViewController 都 ...
- 【swagger】C# 中 swagger 的使用及避坑
@ 目录 1 安装 2 修改名称和版本号 3 显示说明 4 显示控制器注释及汉化 5 路由相同,查询参数不同的方法 6 忽略 Model 中的某些字段 7 传递 header 8 出错时的 HTTP ...
- Vue的父子组件v-model双向绑定,父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- 解决浏览器看不到Flash文档(尤其某慕课)
最近遇到很多朋友说浏览器看不到网课资源的文档等等,就顺手写一篇说一下情况 为什么会文档空白 某课网站上面的文档是用flash进行展示的,同时flash被很多浏览器逐步抛弃(快凉了,都是H5了) fla ...