使用原生js实现选项卡功能实例教程

发布时间:2021-03-05 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了使用原生js实现选项卡功能实例教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。

先来完成html部分。首先,需要一个元素把整个选项卡包含在内。新建一个div元素,它的id命名为tabBox,如下所示:

<div id="tabBox"></div>

在tabBox元素里面,再把选项卡分为标签和内容两个部分,分别命名class为label_box和content_box,如下所示:

="tabBox" class="tab_box">
  ul class="label_box"ul><!--标签部分-->
  ="content_box"内容部分-->
</>

一般情况下,标签元素和内容元素的数量要保持一致,在本实例中把标签和内容都设为三个。 分别在label_box和content_box元素中添加标签和内容,如下所示:

-->
    li>选项一>
    >选项二>选项三="content">内容一>内容二>内容三>
>

为了让选项卡好看一点,读者可以根据自己喜好加上一些样式,也可以直接复制以下样式代码使用:

.tab_box{
  width:600px;
  margin:30px auto;
}
.label_box{
  padding-left:30px;
  font-size:0;
}
.label_box li{
  display:inline-block;
  line-height:
  height:
  padding:0 10px;0 5px;14px;
  border:1px solid #2d9aff;
  border-bottom:none;
  border-top-left-radius:4px;
  border-top-right-radius:
  cursor:pointer;
}
.label_box li.active{
  background:#2d9aff;
  color:#fff;
}
.content_box{20px;
  border-radius:
  box-shadow:0px 0px 6px #aaa;
}
.content_box .content{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')[01.获取所有内容元素的集合
  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 = (){
      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实现选项卡功能实例教程所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。